一·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 先慢后快再慢