From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/animation-fill-mode/index.md | 187 +++++++++----------------- 1 file changed, 65 insertions(+), 122 deletions(-) (limited to 'files/fr/web/css/animation-fill-mode') diff --git a/files/fr/web/css/animation-fill-mode/index.md b/files/fr/web/css/animation-fill-mode/index.md index 01b33f2513..a86250e49e 100644 --- a/files/fr/web/css/animation-fill-mode/index.md +++ b/files/fr/web/css/animation-fill-mode/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/animation-fill-mode --- -
{{CSSRef}}
+{{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.

+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")}}
+{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 animation-fill-mode: none;
 animation-fill-mode: forwards;
 animation-fill-mode: backwards;
@@ -24,95 +25,49 @@ 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.

-
+``` + +### 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-direction` | `animation-iteration-count` | dernière _keyframe_ | + | --------------------- | --------------------------- | ------------------- | + | `normal` | pair ou impair | `100%` ou `to` | + | `reverse` | pair ou impair | `0%` ou `from` | + | `alternate` | pair | `0%` ou `from` | + | `alternate` | impair | `100%` ou `to` | + | `alternate-reverse` | pair | `100%` ou `to` | + | `alternate-reverse` | impair | `0%` ou `from` | + +- `backwards` -

Syntaxe formelle

+ - : 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-direction` | première _keyframe_ | + | -------------------------------- | ------------------- | + | `normal` ou `alternate` | `0%` ou `from` | + | `reverse` ou `alternate-reverse` | `100%` 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](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.demo {
+```css
+.demo {
   border-top: 100px solid #ccc;
   height: 300px;
   font-family: sans-serif;
@@ -138,48 +93,36 @@ animation-fill-mode: both, forwards, none;
     -webkit-animation-name: grow;
     -webkit-animation-duration: 3s;
     -webkit-animation-fill-mode: forwards;
-}
+} +``` -

HTML

+### 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>
+```html +

Déplacez votre souris sur la boîte grise.

+
+
La boîte grandit et s'arrête
+
La boîte grandit
+
+``` -

Résultat

+### Résultat -

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

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

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS) +- {{domxref("AnimationEvent", "AnimationEvent")}} -- cgit v1.2.3-54-g00ecf