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