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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: animation-fill-mode
slug: Web/CSS/animation-fill-mode
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/animation-fill-mode
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>animation-fill-mode</code></strong> indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.</p>
<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/* Gestion de plusieurs animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>none</code></dt>
<dd>L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.</dd>
<dt><code>forwards</code></dt>
<dd>La cible retiendra les valeurs calculées définies lors de la dernière étape (<em>keyframe</em>). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
<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">dernière <em>keyframe</em></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code></td>
<td>pair ou impair</td>
<td><code>100%</code> ou <code>to</code></td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>pair ou impair</td>
<td><code>0%</code> ou <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>pair</td>
<td><code>0%</code> ou <code>from</code></td>
</tr>
<tr>
<td><code>alternate</code></td>
<td>impair</td>
<td><code>100%</code> ou <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>pair</td>
<td><code>100%</code> ou <code>to</code></td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>impair</td>
<td><code>0%</code> ou <code>from</code></td>
</tr>
</tbody>
</table>
</dd>
<dt><code>backwards</code></dt>
<dd>L'animation appliquera les valeur définies par la première <em>keyframe</em> pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première <em>keyframe</em> pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>animation-direction</code></th>
<th scope="col">première <em>keyframe</em></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>normal</code> ou <code>alternate</code></td>
<td><code>0%</code> ou <code>from</code></td>
</tr>
<tr>
<td><code>reverse</code> ou <code>alternate-reverse</code></td>
<td><code>100%</code> ou <code>to</code></td>
</tr>
</tbody>
</table>
</dd>
<dt><code>both</code></dt>
<dd>L'animation respectera les règles qui s'appliquent à <code>forwards</code> et <code>backwards</code>, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.</dd>
</dl>
<div class="note">
<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
</div>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.demo {
border-top: 100px solid #ccc;
height: 300px;
font-family: sans-serif;
}
@keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
@-webkit-keyframes grow {
0% { font-size: 0 }
100% { font-size: 40px }
}
.demo:hover .grows {
animation-name: grow;
animation-duration: 3s;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
animation-name: grow;
animation-duration: 3s;
animation-fill-mode: forwards;
-webkit-animation-name: grow;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Déplacez votre souris sur la boîte grise.</p>
<div class="demo">
<div class="growsandstays">La boîte grandit et s'arrête</div>
<div class="grows">La boîte grandit</div>
</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples',700,300)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.animation-fill-mode")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
<li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>
|
