自定义动画

关键帧

1帧开始---补间动画---2帧结束

关键字写法，from,to

@keyframes run{

from{

动画开始的关键帧

}

to{

动画结束的关键帧

}

}

百分比写法

@keyframes run{

0%{

动画开始

}

20%{

}

50%{

}

100%{

动画结束

}

}

animation自定义动画

animation:run 1s;

animation-name:run;绑定动画关键帧

animation-duration:1s;动画执行时间

animation-timing-function: ;动画的运动速度曲线

取值：linear匀速

ease默认值

ease-in以慢速开始

ease-out以慢速结束

ease-in-out以慢速开始和结束

animation-delay:1s;动画的延迟时间

取值：s ms

默认值0

允许负值

animation-iteration-count:3;规定动画的执行次数

取值：数字

默认值1

infinite无限次

animation-direction:normal;定义动画是否轮流反向播放

取值：normal默认，正常播放

alternate动画轮流反向播放

alternate-reverse从第一次就反向播放

animation-fill-mode: ;动画结束后显示的状态

取值：backwards动画开始的状态

forwards动画结束的状态

both动画开始或结束的状态

animation-play-state: ;动画的播放方式

取值：paused暂停

running运动