参考http://isux.tencent.com/css3/index.html
animation-name 动画名
一、动画名
与@keyframes配合使用,简单的动画可以直接使用关键字from和to,复杂点儿的需要用百分比,如下:
1.使用from ** to
@keyframes demo{
from{ 0;}
to{ 100px;}
}
2.用百分比
@keyframes demo{
0%{background: #000000; 100px;}
20%{background: #888; 120px;}
40%{background: #999; 140px;}
60%{background: #ccc; 160px;}
80%{background: #F0FFF0; 180px;}
100%{background: #FFFF99; 200px;}
}
定义好动画,使用时需要用animation
.aaa{
300px;
height: 200px;
background: #FA0000;
color: #fff;
text-align:center;
animation: demo 4s;
}
二、动画时间
animation-duration 检索或设置对象动画的持续时间如果提供多个属性值,以逗号进行分隔。
例子中是用4秒完成
.aaa{
300px;
height: 200px;
background: #FA0000;
color: #fff;
text-align:center;
animation: demo 4s;
}
三、播放方式
animation-timing-function 检索或设置对象动画的过渡类型
值有以下几种:
ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。
linear:线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in:渐显效果,等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out:渐隐效果,等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out:渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start:马上转跳到动画结束状态。
step-end:保持动画开始状态,直到动画执行时间结束,马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?):第一个参数number为指定的间隔数,即把动画分为n步阶段性展示,第二个参数默认为end,设置最后一步的状态,start为结束时的状态,end为开始时的状态,若设置与animation-fill-mode的效果冲突,而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(<number>, <number>, <number>, <number>):特殊的立方贝塞尔曲线效果。
如下demo:
<div class="bbb">
<button>click2</button>
</div>
.bbb:hover{
animation: demo 1s;
-webkit-animation-timing-function:ease;
-moz-animation-timing-function:ease;
animation-timing-function: ease;
}
四、延时播放时间
animation-dely指定对象延时时间
默认值0表示立即执行,正数为动画延迟一定时间,负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。
延时0.5秒执行
.bbb:hover{
animation: demo1 2s;
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
}
五、播放次数
animation-iteration-count设置对象动画的循环次数
取值:
number:自定义动画执行次数,设置值可为0或正整数。
infinite:无限循环。
.bbb:hover{
animation: demo1 1s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
六、播放方向
animation-direction检索或设置对象动画循环播放次数大于1次时,动画是否反向运动。
取值:
normal:正常方向。
reverse:动画反向运行,方向始终与normal相反。(FF14.0.1以下不支持)
alternate:动画会循环正反方向交替运动,奇数次(1、3、5……)会正常运动,偶数次(2、4、6……)会反向运动,即所有相关联的值都会反向。
alternate-reverse:动画从反向开始,再正反方向交替运动,运动方向始终与alternate定义的相反。
反方向动画
.bbb:hover{
animation: demo1 1s;
animation-direction: reverse;
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
}
六、动画播放后的状态
animation-fill-mode检索或设置对象动画时间之外的状态。
取值:
none:默认值。不设置对象动画之外的状态
forwards:结束后保持动画结束时的状态,但当animation-direction为0,则动画不执行,持续保持动画开始时的状态
backwards:结束后返回动画开始时的状态
both:结束后可遵循forwards和backwards两个规则。
.bbb:hover{
animation: demo1 1s;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
}
七、设置动画状态
animation-play-state
取值:
running:默认值。运动
paused:暂停
.bbb:hover{
animation: demo1 1s;
animation-play-state:running;
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
}