码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 动画模块

时间:2017-07-05 00:22:41      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:状态   -name   lte   结束   nim   系统   样式   strong   ack   

动画模块

动画格式

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

CSS3 动画模块

标签:状态   -name   lte   结束   nim   系统   样式   strong   ack   

原文地址:http://www.cnblogs.com/IceSnova/p/7119108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!