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-direction/index.md | 102 +++++++++++--------------- 1 file changed, 44 insertions(+), 58 deletions(-) (limited to 'files/fr/web/css/animation-direction') diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md index 45fa6dbf7b..2485631ffe 100644 --- a/files/fr/web/css/animation-direction/index.md +++ b/files/fr/web/css/animation-direction/index.md @@ -7,17 +7,18 @@ tags: - Reference translation_of: Web/CSS/animation-direction --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété animation-direction indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.

+La propriété **`animation-direction`** indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée. -
{{EmbedInteractiveExample("pages/css/animation-direction.html")}}
+{{EmbedInteractiveExample("pages/css/animation-direction.html")}} -

Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.

+Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration. -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 animation-direction: normal;
 animation-direction: reverse;
 animation-direction: alternate;
@@ -31,34 +32,31 @@ animation-direction: alternate, reverse, normal;
 animation-direction: inherit;
 animation-direction: initial;
 animation-direction: unset;
-
+``` -

Valeurs

+### Valeurs -
-
normal
-
L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.
-
reverse
-
L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.
-
alternate
-
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (timing functions) sont également inversées (ease-in sera ainsi remplacée par ease-out). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.
-
alternate-reverse
-
La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.
-
+- `normal` + - : L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut. +- `reverse` + - : L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin. +- `alternate` + - : La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (_timing function\*\*s_) sont également inversées (`ease-in` sera ainsi remplacée par `ease-out`). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite. +- `alternate-reverse` + - : La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite. -
-

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.

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

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
p {
+```css
+p {
   animation-duration: 5s;
   animation-name: glissement;
   animation-iteration-count: infinite;
@@ -81,53 +79,41 @@ animation-direction: unset;
     margin-left: 0%;
     width: 100%;
   }
-}
+} +``` -

HTML

+### HTML -
<p class="aller">
+```html
+

   La Chenille et Alice se considérèrent un instant en silence.
   Enfin la Chenille sortit le houka de sa bouche, et lui adressa
   la parole d’une voix endormie et traînante.
-</p>
+

 
-<p class="retour">
+

   « Revenez, » lui cria la Chenille. « J’ai quelque chose
   d’important à vous dire ! »
-</p>
+

+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemples","300","200")}}

+{{EmbedLiveSample("Exemples","300","200")}} -

Spécifications

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

{{cssinfo}}

+{{cssinfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.properties.animation-direction")}}

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

Voir aussi

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