这几天在手机微信分享页面时,有用到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>) ]* ;设置动画执行的方式(缓动效果)。