CSS 动画的两种做法（transition 和 animation）

CSS动画有两种做法，一种是使用transition,另一种是使用animation。

使用transition做动画

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。 例如要在:hover伪元素之间切换定义过渡效果

#heart{
  transition: all 1s;
  
}
#heart:hover{
  transform: scale(1.2);
  
}

使用animation做动画

首先要声明关键帧，有两种写法，一种写法是from to

@keyframes animation {
    from {
        transform:translateX(0%);
    }
    to {
        transform:transateX(100%);
    }
}

另一种写法是百分数

@keyframes animation {
    0% {top: 0; left:0;}
    30% {top: 50px;}
    68%,72% {left: 50px;}
    100% {top:100px; left: 100%;}
}

然后添加动画

animation: 4s linear 0s infinite alternate animation