CSS3 animation 属性

animation基本用法是：

• animation-name

animation-name 属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

Shell

@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }

1 2 3 4 5 6 7 8 9

@keyframes slidein {   from {     transform: translateX(0%);   }     to {     transform: translateX(100%);   } }

• animation-duration

animation-duration属性指定一个动画周期的时长。

默认值为 0s，表示无动画。

Shell

animation-duration: 6s animation-duration: 120ms animation-duration: 1s, 15s animation-duration: 10s, 30s, 230ms

1 2 3 4

animation-duration: 6s animation-duration: 120ms animation-duration: 1s, 15s animation-duration: 10s, 30s, 230ms

• animation-timing-function

animation-timing-function 属性定义 CSS 动画在每一动画周期中执行的节奏。可能值为一或多个。

对于关键帧动画来说，timing function 作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

Shell

animation-timing-function: ease; // 平滑过渡 animation-timing-function: ease-in; // 由慢到快 animation-timing-function: ease-out; // 由快到慢 animation-timing-function: ease-in-out; // 由慢到快再到慢。 animation-timing-function: linear; // 线性过渡 animation-timing-function: step-start; // 等同于steps(1,start) animation-timing-function: step-end; // 等同于steps(1,end)

1 2 3 4 5 6 7

animation-timing-function: ease; // 平滑过渡 animation-timing-function: ease-in; // 由慢到快 animation-timing-function: ease-out; // 由快到慢 animation-timing-function: ease-in-out; // 由慢到快再到慢。 animation-timing-function: linear; // 线性过渡 animation-timing-function: step-start; // 等同于steps(1,start) animation-timing-function: step-end; // 等同于steps(1,end)

关于step的理解，请参考下图：

横轴表示时间，纵轴表示动画完成度（也就是0%~100%）。

第一个图，steps(1, start)将动画分为1段，跳跃点为start，也就是说动画在每个周期的起点发生阶跃（即图中的空心圆 → 实心圆）。由于只有一段，后续就不再发生动画了。

第二个图，steps(1, end)同样是将动画分为1段，但跳跃点是end，也就是动画在每个周期的终点发生阶跃，也是图中的空心圆 → 实心圆，但注意时间，是在终点才发生动画。

第三个图，steps(3, start)将动画分为三段，跳跃点为start，动画在每个周期的起点发生阶跃（即图中的空心圆 → 实心圆）。在这里，由于动画的第一次阶跃是在第一阶段的起点处（0s），所以我们看到的动画的初始状态其实已经是 1/3 的状态，因此我们看到的动画的过程为 1/3 → 2/3 → 1 。

第四个图，steps(3, end)也是将动画分为三段，但跳跃点为end，动画在每个周期的终点发生阶跃（即图中的空心圆 → 实心圆）。虽然动画的状态最终会到达100%，但是动画已经结束，所以100%的状态是看不到的，因此我们最终看到的动画的过程是0 → 1/3 → 2/3。

先定义一个动画：

Shell

@keyframes move { from { background: purple; /*紫色*/ } 50%{ background: blue; /*蓝色*/ } 100% { background: red; /*红色*/ } }

1 2 3 4 5 6 7 8 9 10 11

@keyframes move {   from {     background: purple;   /*紫色*/   }   50%{     background: blue;   /*蓝色*/   }   100% {     background: red;   /*红色*/   } }

然后设置两个正方形，再设置动画参数：

Shell

/*第一个方块*/ .step { animation: move 3s step-start infinite; } /*第二个方块*/ .step2 { animation: move 3s step-end infinite; }

1 2 3 4 5 6 7 8

/*第一个方块*/ .step {   animation: move 3s step-start infinite; }       /*第二个方块*/ .step2 {   animation: move 3s step-end infinite;   }

从上面可以看到，设置了step-start的正方形的颜色变化是蓝色与红色相互切换（跳过了紫色，因为阶跃点是start，也就是0s时已经是50%的状态了，因此直接显示蓝色）；而设置了step-end的正方形的颜色变化是紫色与蓝色相互切换（阶跃点是end，最后没有到红色）。

• animation-delay

animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为 -1s，动画会从它的动画序列的第 1 秒位置处立即开始。

Shell

animation-delay: 3s; animation-delay: 2s, 4ms;

1 2	animation-delay: 3s; animation-delay: 2s, 4ms;

• animation-iteration-count

animation-iteration-count CSS 属性 定义动画在结束前运行的次数 可以是 1 次 无限循环。

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。

Shell

/* 值为关键字 */ animation-iteration-count: infinite; // 无限循环 /* 值为数字 */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* 指定多个值 */ animation-iteration-count: 2, 0, infinite;

1 2 3 4 5 6 7 8 9 10

/* 值为关键字 */ animation-iteration-count: infinite; // 无限循环   /* 值为数字 */ animation-iteration-count: 3; animation-iteration-count: 2.4;   /* 指定多个值 */ animation-iteration-count: 2, 0, infinite;

• animation-direction

animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定。

Shell

animation-direction: normal; // 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 animation-direction: reverse; // 反向运行动画，每周期结束动画由尾到头运行。 animation-direction: alternate; // 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代 animation-direction: alternate-reverse; // 反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。 animation-direction: normal, reverse; animation-direction: alternate, reverse, normal;

1 2 3 4 5 6

animation-direction: normal; // 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 animation-direction: reverse; // 反向运行动画，每周期结束动画由尾到头运行。 animation-direction: alternate; // 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代 animation-direction: alternate-reverse; // 反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。 animation-direction: normal, reverse; animation-direction: alternate, reverse, normal;

• animation-fill-mode

animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

Shell

/* Single animation */ animation-fill-mode: none; // 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 animation-fill-mode: forwards; // 目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值： animation-fill-mode: backwards; // 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值： animation-fill-mode: both; // 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。 /* Multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

1 2 3 4 5 6 7 8 9

/* Single animation */ animation-fill-mode: none; // 当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。 animation-fill-mode: forwards; // 目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值： animation-fill-mode: backwards; // 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值： animation-fill-mode: both; // 动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。   /* Multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

• animation-play-state

animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

初始值：running

Shell

/* Single animation */ animation-play-state: running; // 当前动画正在运行。 animation-play-state: paused; // 当前动画已被停止。 /* Multiple animations */ animation-play-state: paused, running, running; /* Global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset;

1 2 3 4 5 6 7 8 9 10 11

/* Single animation */ animation-play-state: running; // 当前动画正在运行。 animation-play-state: paused; // 当前动画已被停止。   /* Multiple animations */ animation-play-state: paused, running, running;   /* Global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: unset;