动画模块
动画格式
//1.告诉系统需要执行哪个动画
animation-name:动画名
//3.告诉系统动画持续时间
animation-duration:时间
//2.告诉系统所需要创建一个名字为(动画名)的动画
@keyframe 动画名 {
from(0%){
margin-left:0;
}
to(50%){
margin-left:500px;
}
}
动画属性
animation-delay 告诉系统延迟多少秒执行动画
animation-timing-function 规定动画速度曲线
animation-iteration-count 规定动画播放次数,默认为1
animation-direcyion 规定动画是否在下一周期进行逆向播放。默认normal,另一个是alternate表示动画反向播放
animation-play-state 规定动画是否执行或暂停 默认running ,另一个是paused表示暂停
动画有三种状态:等待状态 执行状态 结束状态
animation-fill-mode 指定动画等待状态和结束状态的样式
none 默认状态 forwards让动画的最后一帧保持结束状态的样式
backwards让动画的等待状态为动画第一帧的样式 both forwards+backwards
动画连写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;