CSS3 动画模块

动画模块

动画格式

//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:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;