CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分:
@keyframes
声明动画通过使用@keyframes
建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
@keyframes <keyframes-name>{
<keyframe-block-list>
}
keyframes-name
用于设置当前动画的名称,以便通过animation-name
属性调用。
keyframe-block-list
用于设置动画执行过程中的关键帧。
动画执行完成后回归原始状态且不需要触发条件。
from
、to
)可用百分比替换
@keyframes animate{ from{ width: 200px; height: 200px; } to{ width: 400px; height: 400px; } } 如果设置多个动画,名称、时间需用逗号分隔。
animation-name: animate1,animate2;
animation-duration: 1s,4s;
animation-iteration-count
属性控制。
.box {
width: 200px;
height: 200px;
background: lightcoral;
animation-name: animate;
animation-duration: 1s;
/* infinite表示永久执行 可设置整数 也可设置小数:会执行一段就结束 */
animation-iteration-count: infinite;
/*
animation-iteration-count: 2;
animation-iteration-count: 2.3;
*/
}
/* 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始 默认值 */
animation-direction: normal;
/* 动画交替反向运行,反向运动时,动画起步后退,同时,带时间功能的函数也反向。 */
animation-direction: alternate;
/* 反向运动动画,每周期结束动画由尾到头运行 */
animation-direction: reverse;
/* 反向交替,反向开始交替 动画第一次运行时是反向的, 然后下一次是正向,后面依次循环。 */
animation-direction: alternate-reverse;
测试的次数均为无限次。
normal
默认值 每个循环内动画向前循环 即 动画循环结束后回到起点重新开始
alternate
动画交替反向运行,反向运动时,动画起步后退,同时,带时间功能的函数也反向。
reverse
反向运动动画,每周期结束动画由尾到头运行
alternate-reverse
反向交替,反向开始交替 动画第一次运行时是反向的, 然后下一次是正向,后面依次循环。
/* 运行 */
animation-play-state: running;
/* 暂停 */
animation-play-state: paused;
animation-fill-mode
:属性用于设置动画执行之前和执行之后如何为动画的目标元素应用样式。
此属性可设置的值为:
none
不改变默认行为。
forwards
当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards
在 animation-delay
所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
both
向前和向后填充模式都被应用。