CSS3 动画属性

1.@keyframes

    如果想要创建动画，那么就必须使规则。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，可以多次更改CSS样式的设走。指定的变化发生时使用％,或关键字“from”和“to1’，这是和0%到100%相同的。0%是开头动画，100%是当动画完成。

    为了获得最佳的浏览器支持，应该始终定义为0%和100%的选择器。

2.animation

    所有动画属性的简写属性，除了animation-play-state属性外，它们的语法如下：

    animation: name duration timing-function delay iteration-count direction fll-mode play-state;

3.animation-name

    animation-name属性为@keyframes动画规定名称，语法如下：

    animation-name: keyframename|none;

    该属性有两个参数：

    • keyframename：规定需要绑定到选择器的keyframe的名称。

    • none：规定无动画效果（可用于覆盖来自级联的动画）。

4.animation-duration

    animation-duration属性定义动画完成一个周期需要多少时间，单位是秒或毫秒，语法如下：

    animation-duration: time:

5.animation-timing-function

    animation-timing-function属性指定动画将如何完成一个周期。速度曲线定义动画从一套CSS样式变为另一套CSS样式所用的时间，速度曲线用于使变化更为平滑，语法如下：

    animatiion-tiTning-function: value :

    animation-timingHlinction使用的数学函数称为三次贝塞尔曲线、速度曲线。使用此函数时，可以使用自己的值或预先定义的值之一。

    animation-timing-function属性的值可以是以下几种：

    •inear：动画从头到尾的速度是相同的。

    •ease:默认。动画以低速开始，然后加快，在结束前变慢。

    •ease-in：动画以低速开始。 o ease-out：动画以低速结束。 

    •ease-in-out：动画以低速开始和结束。

    •cubic-bezier(n,n,n,n):在cubic-bezie「函数中使用自己的值。可能的值是0~1的数值。

6.animation-delay

    animation-delay属性定义动画什么时候开始，其值的单位可以是秒（s)或毫秒（ms)。

7.animation-iteration-count

    animation-iteration-count属性定义动画应该播放多少次，默认值为1，属性的值可以使以下 两种：

    • n：一个数字，定义应该播放多少次动画。

    • infinite：指定动画应该播放无限次（永远）。

8.animation-direction

    animation-direction属性定义是否循环交替反向播放动画，默认是normal,语法如下：

    animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit:

    animation-direction属性的值可以使以下几种：

    © normal：默认值，动画按正常播放。

    © reverse:动画反向播放。

    © alternate：动画在奇数次（1、3、5……）正向播放，在偶数次（2、4、6……）反向播放。

    © alternate-reverse:动画在奇数次（1、3、5 )反向播放，在偶数次（2、4、6 )正向播放。

    © Initial：设置该属性为它的默认值。

    © Inherit：从父元素继承该属性。

9.animation-play-state

    animation-play-state属性指定动画是否正在运行或已暂停，默认是running，语法如下：

    animation-play-state: paused|running;

    animation-play-state属性的值可以是以下两种: 

    © paused：指定暂停动画。

    © running：指定正在运行的动画。