Css3动画-@keyframes与animation

一、@keyframe

定义和用法

@keyframes是用来创建帧动画的，我们通过这个属性可以用纯css来实现一些动画效果。

一般格式是：

@keyframes 动画名称{

0%{

　　动画开始时的样式

}

100%{

　　动画结束时的样式

}

}

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间，浏览器可以自动补间，中间也可以设置多个百分比，实现更加多变的动画效果。

由于@keyframes 属性是css3新属性，许多浏览器都要加兼容性前缀：

Firefox：-moz-

Opera ：-o-

Safari 和 Chrome：-webkit-

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

二、animation

定义和用法

animation属性是写在要实现动画的元素的选择器中的，实现元素的动画绑定。animation 属性是一个简写属性，用于设置六个动画属性：

animation-name   ：   规定需要绑定到选择器的 keyframe 名称。

animation-duration    ：    规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function    ：    规定动画的速度曲线。

animation-delay    ：    规定在动画开始之前的延迟。

animation-iteration-count    ：    规定动画应该播放的次数。

animation-direction    ：    规定是否应该轮流反向播放动画。

语法

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

1.animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数来生成速度曲线。我们能够在该函数中使用自己的值，也可以使用预定义的值：

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

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

ease-in：动画以低速开始。

ease-out：动画以低速结束。

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

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2.animation-iteration-count: n | infinite;

n：定义动画播放次数的数值。

infinite：规定动画应该无限次播放。

3.animation-direction:normal | alternate;

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

    alternate：动画轮流反向播放（动画在奇数次数正常播放，在偶数次数向后播放）。

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

三、例子