css3属性之animation详解

文章2015-03-262,006 人已阅来源:网络

通过 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;}
}