css3 动画(animation)-简单入门

css3之动画(animation)

 css3中我们可以使用动画，由于取代以前的gif图片，flash动画，以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画)。具体如何使用呢？？？

首先定义一个动画，然后引用动画。

定义一个动画要使用@keyframes，然后跟上你要定义的动画的名字。关键字"from"表示开始， "to"表示结束，等同于0% 和 100%。最好使用百分比来表示变化发生的时间，这样的话还可以定义从开始到结束中间的其它的时间状态，例如，25%，50%等等，而且使用百分比的话，浏览器的兼容性会更好。

创建过动画之后，需要绑定到选择器样式上面，这样就可以在HTML中直接引用样式，从而实现动画效果。

例如：a.定义一个从红色到黄色的动画。

@keyframes redToYelloAnimate
{
    from {background: red;}
    to {background: yellow;}
}

b.定义一个选择器div的样式，使用animation属性引用动画。动画的名字是redToYelloAnimate，用2s时间，从红色变到黄色。

div{
     animation: redToYelloAnimate 2s;
 }

animation是动画所有属性的的简写。具体包含：

animation-name: 规定@keyframes动画的名称，就是你定义动画时所起的名字。

animation-duration:完成一次完整的动画需要花费的时间，注意单位是s(秒)或者ms(毫秒)，默认是0，所以这个属性必须赋值，不然没动画效果。

animation-timing-function:规定动画的速度曲线。默认是“ease”，动画是低速开始，然后加快，最后变慢直至结束。

animation-delay:动画延迟的时间，默认是0。

animation-iteration-count:动画被播放的次数，默认是1。

animation-direction:动画是否在下一个周期逆向地播放

animation-play-state:动画是否正在运行或暂停，默认是“running”

animation-fill-mode:规定对象动画时间之外的状态。

有几个属性需要说一下:

animation-timing-function规定动画的速度曲线，使用名为三次贝塞尔(Cubic Bezier)函数的数学函数，来生成速度曲线，提供了几个值，你也可以自己定义值。linear:动画一直匀速运动。ease-in 动画低速开始。ease-out动画低速结束。ease-in-out:动画低速开始和结束。cubic-bezier(n,n,n,n)：在cubic-bezier 函数中定义自己的值。

animation-iteration-count动画播放的次数，值是n次或者无限次infinite。

animation-direction：alternate是反向播放，如果动画设为只播放一次，alternate不会有效果。有时需要slidedown下拉的效果，如果可以反向播放，那么slideup收起的动作就可以使用同一个动画了？！！！一开始欣喜若狂，后来发现，只播放一次，是不会有效果的，所以slidedown和slideup使用同一个动画，不可行。。。真是个大缺憾啊。。。。。。。

animation-fill-mode：none | forwards | backwards | both

none不改变默认行为。

forwards 当动画完成之后，保持最后一个属性值。如上面的例子中，如果想让div在动画结束之后一直保持黄色的话，就需要使用这个值。

backwards  在animation-delay 所制定的一段时间内，动画开始之前，使用开始属性值。

both 向前和向后填充模式都被应用。