程序员人生 网站导航

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

栏目:php开源时间:2014-10-02 08:00:01

这几天在手机微信分享页面时,有用到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-property: all | none | <property>[ ,<property> ]*;设置要以动画方式变换的CSS属性。


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

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

      transition-duration:<time>[ ,<time>]*;设置动画的过渡时间。


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

时间可为正整数,负整数和0,非0的时候必须设置单位为s(秒)或ms(毫秒);

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

          transition-delay:<time>[ ,<time>]*;设置动画延迟执行的时间。

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>) ]* ;设置动画执行的方式(缓动效果)。

    

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐