blob: 9ac05523048b04748820def24db7f4439a975a89 (
plain)
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: animation-fill-mode
slug: Web/CSS/animation-fill-mode
translation_of: Web/CSS/animation-fill-mode
---
<div> </div>
<p><strong><code>animation-fill-mode</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 属性指定CSS动画应该如何在其执行前后的样式展示情况。</p>
<pre class="brush: css no-line-numbers">/* 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;
</pre>
<p>使用提示<code> animation </code>来一次设置所有动画属性通常很方便。</p>
<h2 id="语法">语法</h2>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>none</code></dt>
<dd>不执行动画时，动画不会应用任何样式。该元素会使用其<strong><code>keyframes</code></strong>关键动画帧规则来显示动画。这是默认值。</dd>
<dt><code>forwards</code></dt>
<dd>动画执行后停留到最后一个关键帧动画的计算值，<code><strong>简单来说执行结束动画会停留到结束时候的状态</strong></code>，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 <strong><code>forwards</code></strong> 元素会停留到动画执行结束后的右边而不是最初的左边。可以看以下图</dd>
<dt><a href="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif"><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif" style="height: 736px; width: 1723px;"></a></dt>
<dd>当然最后动画停留显示的关键帧会取决于 <code>"animation-direction"</code> 和 <code>"animation-iteration-count"</code>这两个属性 运行方向和运行次数:
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>animation-direction</code></th>
<th scope="col"><code>animation-iteration-count</code></th>
<th scope="col">last keyframe encountered</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code></td>
<td>偶数或奇数值</td>
<td><code>100%</code> 或 <code>to</code></td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>偶数或奇数值</td>
<td><code>0%</code> 或 <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>偶数值</td>
<td><code>0%</code> 或 <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>奇数值</td>
<td><code>100%</code> 或 <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>偶数值</td>
<td><code>100%</code> 或 <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>奇数值</td>
<td><code>0%</code> 或 <code>from</code></td>
</tr>
</tbody>
</table>
</dd>
<dt><code>backwards</code></dt>
<dd>与上面 <strong><code>forwards</code></strong> 值效果相反，动画执行后停留到第一个关键帧动画，准确说是<code><strong>没有执行动画之前的初始状态</strong></code>。</dd>
<dd>【（the animation will apply the values defined in the first relevant <a href="https://developer.mozilla.org/en-US/docs/CSS/@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the <code>"animation-delay"</code> period.）原文大概意思是会停留第一个关键帧，并会保留 <code>"animation-delay"</code> 延迟属性的所设定周期。】</dd>
<dd>会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合<code><strong>both</strong></code>的例子进行尝试。</dd>
<dd><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_backwards.gif" style="height: 736px; width: 1698px;"></dd>
<dd>第一个相关关键帧会取决于 <code>"animation-direction"</code> 方向属性:
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>animation-direction</code></th>
<th scope="col">first relevant keyframe</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code> 或 <code>alternate</code></td>
<td><code>0%</code> 或 <code>from</code></td>
</tr>
<tr>
<td><code>reverse</code> 或 <code>alternate-reverse</code></td>
<td><code>100%</code> 或 <code>to</code></td>
</tr>
</tbody>
</table>
</dd>
</dl>
<dl>
<dt><code>both</code></dt>
<dd>动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。</dd>
<dt><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_both.gif" style="height: 755px; width: 1698px;"></dt>
<dd>与上面两个值的差别是，如果元素使用 <code><strong>forwards</strong></code>、<code><strong>backwards</strong></code> 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。</dd>
</dl>
<div class="note">
<p><strong>PS</strong>: 当您在一个<code>animation-*</code>属性上指定多个逗号分隔的值时，它们将被分配给 <code>"animationname"</code> 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
</div>
<h2 id="Example" name="Example">Example</h2>
<p>You can see the effect of <code>animation-fill-mode</code> in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Move your mouse over the gray box!</p>
<div class="demo">
<div class="growsandstays">This grows and stays big.</div>
<div class="grows">This just grows.</div>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.demo {
border-top: 100px solid #ccc;
height: 300px;
}
@keyframes grow {
0% { font-size: 0; }
100% { font-size: 40px; }
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
}</pre>
<p> </p>
<p>查看 <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> 更多有關的例子</p>
<h2 id="相關鏈接">相關鏈接</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>JavaScript {{domxref("AnimationEvent")}} API</li>
</ul>
|
