检索或设置对象动画时间之外的状态。

这几天在手机微信分享页面时，有用到css3动画，现将其一些属性列举出来，方便以后学习查找。

动画的一些属性：

animation-name: none | <identifier> [ , none | <identifier> ]*;定义一个或多个动画名称。

animation-duration: <time>[,<time>]*; 指定对象动画的持续时间 。

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) [, linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<number>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>) ]*; 指定对象动画的持续时间 。

animation-delay: <time>; 指定对象动画的持续时间 。

animation-iteration-count: <number>|infinite; 指定对象动画循环播放的次数。

animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。

animation-play-state: running | paused 检索或设置对象动画的状态。

animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态。

过渡属性：

transform呈现的是一种变形结果，而Transation呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。http://www.w3.org/TR/css3-transitions/

transition可以和Transform同时使用。

transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值。

transition-duration用来定义转换动画的时间长度，即从旧属性换到新属性花费的时间，单位为秒。

默认情况下动画过渡时间为0秒，所以当我们指定元素动画时会看不到过渡的过程直接看到结果。

transition-delay用来定义过渡动画的延迟时间。

时间可为正整数，负整数和0，非0的时候必须设置单位为s（秒）或ms（毫秒）；

为负数的时候过渡的动作会从该时间点开始显示，之前的动作被截断；为正数的时候过渡的动作会延迟触发。

transition-timing-function用来定义过渡动画的效果。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) ]* ;设置动画执行的方式（缓动效果）。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠