animation 返回

/***  animation ***/

        animation与tranisition功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于：使用tranisition功能时只能通过指定的属性的开始值与结束值，然后在这两个属性值之间进行平滑过渡，来实现动画效果；而animation通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

        在safari浏览器或chrome浏览器，全使用如下所示的方法来创建关键帧     @-webkit-keyframes  关键帧集合名{创建关键帧的代码}

        在火狐浏览器，全使用如下所示的方法来创建关键帧     @-moz-keyframes  关键帧集合名{创建关键帧的代码}

        在Opera浏览器，全使用如下所示的方法来创建关键帧     @-o-keyframes  关键帧集合名{创建关键帧的代码}

关键帧的集合创建之后，在元素的样式中使用该关键帧的集合，例如：

div:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s; //完成整个动画所花费的时间
            -webkit-animation-timing-function:linear;  //实现动画的方法

            -webkit-animation-iteration-count:infinite; //设定为某个整数值，表示动画播放的次数，也可以设定为infinite，表示循环播放。

}

例子：（这里使用chrome内核为例子）

<style>

div{
            background-color:red;
        }
        @-webkit-keyframes mycolor{
            0%{
                background-color:red;
            }
            40%{
                background-color:blue;
            }
            70%{
                background-color:yellow;
            }
            100%{
                background-color:red;
            }
}
div:hover{
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;

            -webkit-animation-iteration-count:2;

 }

</sylt>

<div>示例文字</div>