aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/animation-iteration-count
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/animation-iteration-count
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/animation-iteration-count')
-rw-r--r--files/fr/web/css/animation-iteration-count/index.md100
1 files changed, 43 insertions, 57 deletions
diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md
index 7291b39c13..f2441ca1f0 100644
--- a/files/fr/web/css/animation-iteration-count/index.md
+++ b/files/fr/web/css/animation-iteration-count/index.md
@@ -7,54 +7,52 @@ tags:
- Reference
translation_of: Web/CSS/animation-iteration-count
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p>La propriété <strong><code>animation-iteration-count</code></strong> indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.</p>
+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.
-<p>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.</p>
+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.
-<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
+{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
-<p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p>
+Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+```css
+/* Valeur avec un mot-clé */
animation-iteration-count: infinite;
/* Valeur avec une quantité */
-/* Type &lt;number&gt; */
+/* Type <number> */
animation-iteration-count: 3;
animation-iteration-count: 2.3;
/* Gestion de plusieurs animations */
animation-iteration-count: 2, 0, infinite;
-</pre>
+```
-<p>La propriété <code>animation-iteration-count</code> est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.</p>
+La propriété `animation-iteration-count` est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
-<dl>
- <dt><code>infinite</code></dt>
- <dd>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é <strong><code>animation-direction</code></strong>.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Le nombre de répétitions pour l'animation. La valeur par défaut est <code>1</code> (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 <code>0.5</code> indiquera une moitié du cycle de l'animation).</dd>
-</dl>
+- `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).
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise 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>
+> **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](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS).
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
{{csssyntax}}
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="CSS">CSS</h3>
+### CSS
-<pre class="brush: css">p {
+```css
+p {
animation-duration: 3s;
animation-name: glissement;
animation-iteration-count: infinite;
@@ -78,54 +76,42 @@ animation-iteration-count: 2, 0, infinite;
margin-left: 0%;
width: 100%;
}
-}</pre>
+}
+```
-<h3 id="HTML">HTML</h3>
+### HTML
-<pre class="brush: html">&lt;p class="infini"&gt;
+```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.
-&lt;/p&gt;
+</p>
-&lt;p class="dix"&gt;
+<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à.
-&lt;/p&gt;</pre>
+</p>
+```
-<h3 id="Résultat">Résultat</h3>
+### Résultat
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+{{EmbedLiveSample("Exemples","300","300")}}
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
-<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-iteration-count', 'animation-iteration-count')}}</td>
- <td>{{Spec2('CSS3 Animations')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | État | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}} | {{Spec2('CSS3 Animations')}} | Définition initiale. |
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("css.properties.animation-iteration-count")}}</p>
+{{Compat("css.properties.animation-iteration-count")}}
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
-<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>
+- [Manipuler les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS)
+- {{domxref("AnimationEvent", "AnimationEvent")}}