css动画

 

一·Css动画
1.定义动画:使用@kexframes定义动画.关键帧可以使用关键字from-to.也可以使用0%-100%
⒉.配置动画:
1) animation-name动画名字
取值:@keyframes定义的动画的名字

2) animation-duration动画持续的时间
取值:单位可以是s，也可以是ms，默认是O

3)animation-iteration-count动画迭代次数
取值:数字，默认值为1，不能为负数，可以为小数比如0.5表示播放一半
infinite无限循环
4)animation-delay
动画延迟执行时间
取值:动画延迟，即元素在加载成功后到动画运行前的时间。单位为s 、ms ,默认值为Os，即动画加载成功后立刻运行。例如: animation-delay: 3s;
5) animation-direction
动画方向
取值: normal
默认值，动画按照正常顺序播放
reverse
播放帧的顺序反转，播放的起点为帧的结束
alternate
播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放
到帧的开始，与此同时，速度曲线也交替反转。反转时ease-in交替为ease-out
alternate-reverse 与alternate类似，不过第一次播放时候需要反转。

7) animation-timing-function   动画的速度曲线
取值:ease     默认值，先快后慢
linear      线性增长，匀速
ease-in    先慢后快
ease-out     先快后慢
ease-in-out     先慢后快再慢