动画的定义与使用

定义动画：

@keyframes 动画名称{

关键帧：

百分比： {样式}

}

 

使用动画：

复合写法 ：

animation: 动画名称 动画需要的时长 速度方式 延迟时间 infinite/次数 是否反向运动 动画结束是否停留在结束位置; 

单一写法：

animation-name：动画名称

animation-duration: 动画所需的时长;    说明： 单位可以是s秒，也可以是ms毫秒 -- 1s = 1000ms 

animation-timing-function: 速度方式;

animation-delay: 延迟的时间;

animation-iteration-count: 播放次数(数字)或infinite(无限次);

animation-direction: normal/alternate;    说明：  normal表示正向播放，alternate表示第一次正，第二次就是反，第三次又是正

animation-fill-mode: forwards/none; （动画停在最后一帧或开始位置  ）

animation-play-state: paused/running;     （规定动画正在运行或暂停，默认为running ）

选择器{

 animation: 动画名称 时长 延迟时间 速度方式 次数 是否反向播放 是否暂停 是否停止在结束位置或开始位置;

}