animation是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,如果对flash有一定的了解,那这个属性就会很容易学习。
先展示一下简单的动画效果
__ __
O
O
来了解一下animation的具体属性
1.name:动画名称
-webkit-animation-name: kf_play;
-moz-animation-name: kf_play;
-o-animation-name: kf_play;
animation-name: kf_play;
2.duration:动画持续时间
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
3.animation-timing-function:动画播放速率曲线
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
//其他可选值:ease | linear | ease-in | ease-out | ease-in-out
4.delay:动画延迟
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
5.animation-iteration-count:动画播放次数
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
//其他可选值:infinite(无限次)
6.animation-direction:动画时间轴的播放方向
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
//其他可选值:normal(普通) | reverse(反向) | alternate(先正向,后反向) | alternate-reverse(先反向,后正向)
7.animation-fill-mode:动画播放完毕后,动画定格的动画帧
-webkit-animation-fill-mode: none;
-moz-animation-fill-mode: none;
-o-animation-fill-mode: none;
animation-fill-mode: none;
//其他可选值: none(无) | forwards(结束帧) | backwards(开始帧) | both(开始帧或结束帧)
8.animation-play-state:动画的播放状态(暂停/播放)
-webkit-animation-play-state: running | paused;
-moz-animation-play-state: running | paused;
-o-animation-play-state: running | paused;
animation-play-state: running | paused;
@keyframes。
animation不能单独使用,必须配合@keyframes{}。然后使用animation-name关联起来。@keyframe 的语法。
1.可以使用关键词“form”和“to”来表示动画从开始到结束的关键帧。
2.还可以使用%定义多个关键帧的样式(而%的基值是动画播放时间:animation-duration):
@keyframes kf_play {
0% {
width: 100px;
}
10% {
width: 200px;
}
50% {
width: 300px;
}
80% {
width: 400px;
}
100% {
width: 500px;
}
}