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%。