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

La propriété animation-iteration-count indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.

+ +

Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.

+ +
{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
+ + + +

Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+animation-iteration-count: infinite;
+
+/* Valeur avec une quantité */
+/* Type <number>            */
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+/* Gestion de plusieurs animations */
+animation-iteration-count: 2, 0, infinite;
+
+ +

La propriété animation-iteration-count est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.

+ +

Valeurs

+ +
+
infinite
+
L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété animation-direction.
+
<number>
+
Le nombre de répétitions pour l'animation. La valeur par défaut est 1 (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi 0.5 indiquera une moitié du cycle de l'animation).
+
+ +
+

Note : Lorsqu'on utilise 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

+ +
p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.infini {
+  animation-iteration-count: infinite;
+}
+
+.dix {
+  animation-iteration-count: 10;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

HTML

+ +
<p class="infini">
+  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="dix">
+  Voyons si je me souviendrai de tout ce que je savais : quatre fois
+  cinq font douze, quatre fois six font treize, quatre fois sept font
+  — je n’arriverai jamais à vingt de ce train-là.
+</p>
+ +

Résultat

+ +

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

+ +

Spécifications

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

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.animation-iteration-count")}}

+ +

Voir aussi

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