有关 animation 动画你要知道的

通过 CSS3，我们能够创建动画 animation，一个非常有意思的东西。它在许多网页中取代动画图片、JavaScript，甚至简单的Flash 动画，让页面生动起来。

实例

先举个简单的例子：

div {
    width:20px;
    height:20px;
    background:red;
    position:relative;
    animation:mymove 10s infinite;
    -webkit-animation:mymove 10s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
    from {left:0px;}
    to {left:300px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/ {
    from {left:0px;}
    to {left:300px;}
}

在这个例子里：宽20px、长20px的红色方块，从屏幕左侧left=0的位置，匀速移动到left=300px的位置，并且循环运动。

来，我们来看这里的关键词：

mymove => 动画的名称

10s => 动画执行时间

infinite => 无限次重复

——————————手动分割线——————————

属性

animation:name duration timing-function delay iteration-count direction;

想弄明白animation动画，首先，我们要知道他的几个属性：

1. animation-name
动画的名字，也就是绑定到选择器的 keyframe 名称。

2. animation-duration

动画执行从开始到结束花费的时间，默认是0，如果不设置该属性，就不会有动画效果。

3. animation-timing-function

动画运动速度。这个比较复杂，可以设置为：

· linear：匀速运动

· ease： 这个是默认的效果，低速-高速-低速。

· ease-in： 低速开始

· ease-out： 低速结束

· ease-in-out： 低速开始，低速结束

· cubic-bezier(n,n,n,n)：n可以是0-1的任意值

4. animation-delay
动画延时执行，延迟的时间，默认是0，也可以设置负值。

5. animation-iteration-count
动画播放次数，infinite是无限播放

6. animation-direction
动画反向播出

——————————手动分割线——————————

keyframes

Chrome 和 Safari 需要前缀 -webkit-，

Firefox 需要前缀 -moz-，

Opera 需要前缀 -o-。

注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。