CSS3_animation使用笔记

标签：额外   anim   默认值   cti   run   nim   lte   不能   func   

01. keyframes
　　01. 语法：
　　　　@keyframes 动画名{
　　　　　　0%:{属性：值},
　　　　　　...
　　　　　　100%:{属性：值}
　　　　}
　　02. 0%可以用from替代 100%可以用to替代，其中0%的%不能省略
　　03. 百分比表示动画执行的整个过程是从0%到100%，其中到每一个百分点的时候属性变为指定的值0%和100%我们一般都要写上

02. animation-name:
　　用keyframes指定的动画名

03. animation-duration
　　动画持续的时间，以s或ms为单位

04. animation-timing-function:
　　用来指定改变属性值的变换速率，
　　和transition-timing-function的作用一样，具有六种变换方式

05. animation-delay:
　　延迟多久后执行动画，以s或者ms为单位

06. animation-iteration-count:
　　动画执行的次数，可以执行具体的次数，也可以为infinite，表示一直执行

07. animation-direction:
　　用来指定动画播放的方向，前提是设置了animation-iteration-count
　　取值可以为normal或者alternate
　　normal表示每一次都按照预定的来正常播放
　　alternate表示基数次向前播放，偶数次倒过来播放

08. animation-play-state
　　用来控制动画的播放状态
　　可以为running或者paused
　　running为默认值，可以设置为paused让动画赞不播放

09. animation-fill-mode
　　取值：
　　　　none 　　 　　 不改变默认值
　　　　forwards 　　    当动画完成后，保持最后一个属性值
　　　　backwards 　    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
　　　　both 　　　　   同时应用forwards和backwards属性

10. 可以使用animation属性把前面几个属性综合写在一起,但如果指定animation-play-state需要额外指定，不能写在animation中
　　animation:name duration timing-function delay iteration-count dirction

11 注意点：
　　transition动画会在属性改变时才执行，但是animation动画会立马执行。

CSS3_animation使用笔记

标签：额外   anim   默认值   cti   run   nim   lte   不能   func   

原文地址：http://www.cnblogs.com/greatfish/p/7760907.html