From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/animation-fill-mode/index.html | 190 ++++++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/fr/web/css/animation-fill-mode/index.html (limited to 'files/fr/web/css/animation-fill-mode') diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..415bb13bcd --- /dev/null +++ b/files/fr/web/css/animation-fill-mode/index.html @@ -0,0 +1,190 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

La propriété animation-fill-mode indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ + + +

Syntaxe

+ +
/* 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;
+
+ +

Valeurs

+ +
+
none
+
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.
+
forwards
+
La cible retiendra les valeurs calculées définies lors de la dernière étape (keyframe). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countdernière keyframe
normalpair ou impair100% ou to
reversepair ou impair0% ou from
alternatepair0% ou from
alternateimpair100% ou to
alternate-reversepair100% ou to
alternate-reverseimpair0% ou from
+
+
backwards
+
L'animation appliquera les valeur définies par la première keyframe pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première keyframe pertinente dépend de la valeur de {{cssxref("animation-direction")}} : + + + + + + + + + + + + + + + + + +
animation-directionpremière keyframe
normal ou alternate0% ou from
reverse ou alternate-reverse100% ou to
+
+
both
+
L'animation respectera les règles qui s'appliquent à forwards et backwards, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.
+
+ +
+

Note : Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété animation-*, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

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;
+}
+ +

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>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',700,300)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.animation-fill-mode")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf