css3属性之animation详解

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

animation属性是可以进行简写的：

animation: name, duration, timing-function, delay, iteration_count, direction

下面就对CSS3动画属性进行详解：

一、animation-name

这个属性的使用必须结合@keyframes一起使用

例如：animation-name:fontbulger;
@keyframes fontbulger{
0%{font-size:10px;}
100%{font-siez:20px;}
}

注：百分比的意思就是duration的百分比，如果没有设置duration的话，则表示为无穷大。

二、animation-duration

表示这一个动画效果持续的时间

例如：animation-duration: 1s;

三、animation-timing-function

表示动画使用的时间曲线

属性值：ease | linear | ease-in | ease-out | ease-in-out

ease[动画以低速开始，然后加快，在结束前变慢]

linear[动画速度一直是匀速执行]

ease-in[动画以低速开始，速度逐渐增加]

ease-out[动画以高速结束，速度逐渐递减]

ease-in-out[动画以低速开始和结束]

例如：animation-timing-function: ease-out;

四、animation-delay

表示开始动画之前的延时，即加载完css后多长时间后开始执行该动画效果。

例如：animation-delay:2s;

五、animation-iteration-count

表示动画要重复几次

属性值：n |infinite

n[n为具体的数量，比如10]

infinite[为该动画无限次循环播放]

例如：animation-iteration-count:infinite

六、animation-direction

表示动画的方向

属性值 ：normal(默认) | alternate

normal[默认值。即动画应该正常播放。]

alternate[动画应该轮流反向播放]

例如：animation-direction:normal;

七、animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见。

属性值：none | forwards | backwards | both

none[不改变默认行为。]

forwards [当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。]

backwards [在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。]

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

例如：animation-fill-mode:forwards;

八、animation-play-state

设置动画的运行状态。

属性值 ：paused | running

running[默认值。设定动画正在播放]

paused[设定动画已暂停]

例如：animation-play-state:running;

animation 综合案例

@keyframes fontbulger{
 0% {font-size: 10px;}
 100% {font-size: 20px;}
 }
 #tonjay_com {
 animation-name: fontbulger;
 animation-duration: 1s;
 animation-iteration-count:3;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: both;
 animation-delay: 2s;
 }
 <div id="tonjay_com">Web前端资源网 www.tonjay.com</div>

当然：各种浏览器支持前缀，还是需要写的。上面的是标准的写法，懒得再加以处理。具体的支持参考以下写法：

#tonjay_com
{
animation: tonjay_com 1s;
-moz-animation: tonjay_com 1s; /* Firefox */
-webkit-animation: tonjay_com 1s; /* Safari 和 Chrome */
-o-animation: tonjay_com 1s; /* Opera */
}
@keyframes fontbulger{
0% {font-size: 10px;}
100% {font-size: 20px;}
}
@-moz-keyframes fontbulger{
0% {font-size: 10px;}
100% {font-size: 20px;}
}
@-webkit-keyframes fontbulger{
0% {font-size: 10px;}
100% {font-size: 20px;}
}
@-o-keyframes fontbulger{
0% {font-size: 10px;}
100% {font-size: 20px;}
}