一、动画属性animation
animation:
name(动画名称-必选) duration(持续时间-必选) timing-function(运动曲线-可选)
delay (何时开始可选) iteration-count(播放次数-可选) direction(是否反方向-可)
fill-mode; (动画位置起始或者结束;-可选)
二、定义动画
除了0和100%,还可以用from和to来表示序列
动画序列
1.可以做多个状态的关键帧
2.里面的百分比要是整数
3.里面的百分比是总的时间的划分,这里是2s
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0px, 500px);
}
/* 结束状态 */
100% {
transform: translate(0, 0);
}
}
三、调用动画