CSS@keyframes使用方法

@keyframes就是个动画，可以理解成多个transform组成的一个组。

@keyframes 动画名 {
from{
你的css
}
to{
你的css
}
}

调用这个动画的时候用animation
animation由六个属性组成

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
  所以按顺序写就行了。
  animation : 动画名 时间 速度曲线 开始的时候延迟 播放次数 轮流反向播放
  来个例子：

.aaa {
    -webkit-animation: gif 1.4s infinite linear;
    animation: gif 1.4s infinite linear; 
}
@keyframes gif {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

P.S from就是0% to就是100%。