# 一、动画定义
关键帧 @keyframes 通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。
和 transition 相比，关键帧 @keyframes 可以控制动画序列的中间步骤。
关键帧中出现的 !important 将会被忽略。
@keyframes putIn {
from {
opacity: 0;
transform: scale(8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shake {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# 二、动画属性
# animation
animation 是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
2
3
4
5
6
7
8
9
# animation-duration
animation-direction 定义动画是否反向播放，通常在简写属性 animation 中设定。
/* Single animation */
animation-duration: 0s /* 初始值 */
animation-duration: 6s;
animation-duration: 120ms;
/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
2
3
4
5
6
7
8
# animation-timing-function
animation-timing-function 定义动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function>。
对于关键帧动画来说，<timing-function> 作用于一个关键帧周期而非整个动画周期。
若关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
/* Keyword values */
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;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# animation-delay
animation-delay 定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
/* Single animation */
animation-delay: 0s; /* 初始值 */
animation-delay: 3s;
animation-delay: -1500ms; /* 动画从第1500ms的位置立即开始 */
/* Multiple animations */
animation-delay: 2.1s, 480ms;
2
3
4
5
6
7
# animation-iteration-count
animation-iteration-count 定义动画在结束前运行的次数。
如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。
通常在简写属性 animation 中设定。
/* Keyword value */
animation-iteration-count: infinite; /* 无限循环 */
/* <number> values */
animation-iteration-count: 3;
animation-iteration-count: 2.4;
/* Multiple values */
animation-iteration-count: 2, 0, infinite;
2
3
4
5
6
7
8
9
# animation-direction
animation-direction 定义动画是否反向播放，通常在简写属性 animation 中设定。
/* Single animation */
animation-direction: normal; /* 初始值 */
animation-direction: reverse; /* 反向运行 */
animation-direction: alternate; /* 正反向交替运行，由正向开始 */
animation-direction: alternate-reverse; /* 正反向交替运行，由反向开始 */
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
2
3
4
5
6
7
8
9
10
11
12
13
14
# animation-fill-mode
animation-fill-mode 定义动画在执行之前和之后如何将样式应用于其目标。
详见 animation-fill-mode (opens new window)
/* Single animation */
animation-fill-mode: none; /* 初始值 */
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
2
3
4
5
6
7
8
9
# animation-play-state
animation-play-state 定义一个动画是运行或者暂停。
可以通过查询它来确定动画是否正在运行。还可以设置它的值来暂停和恢复动画。
恢复暂停的动画，是从它开始暂停的地方，而不是动画起点。
/* 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;
2
3
4
5
6
7
8
9
10
11
# animation-name
animation-name 定义目标的一系列动画，每个名称代表一个由 @keyframes 定义的动画。
/* Single animation */
animation-name: none; /* 初始值 */
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset
2
3
4
5
6
7
8
9
10
11
12
13
14