animation-direction

  • Raccourci de la révision : CSS/animation-direction
  • Titre de la révision : CSS : la propriété animation-direction
  • ID de la révision : 15517
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire 1 words removed

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS animation-direction précise si l'animation doit se jouer à l'envers ou selon des cycles alternés.

Il est souvent utile d'utiliser la propriété raccourcie {{ cssxref("animation") }} afin de définir toutes les propriétés en une seule fois.

  • {{ Xref_cssinitial() }} : normal
  • S'applique à : éléments de niveau bloc et éléments de niveau en ligne
  • {{ Xref_cssinherited() }} : non
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : comme spécifiée

Syntaxe

animation-direction: normal | alternate [, normal | alternate]*

Valeurs

normal
L'animation doit se jouer vers l'avant à chaque cycle. En d'autres termes, à chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau. Ceci est la valeur par défaut de cette propriété.
alternate
L'animation doit changer de sens à chaque cycle. Lorsqu'elle est jouée à l'envers, les étapes de l'animation sont appliquées à reculons. De plus, la temporisation est aussi inversée. Par exemple une animation ease-in est remplacée par une animation ease-out lorsqu'elle est jouée à l'envers.
reverse
L'animation est jouée à l'envers à chaque cycle. A chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau.
alternate-reverse
Comme pour la valeur alternate, l'animation change de sens à chaque cycle. L'animation est jouée à l'envers lors du premier cycle, puis à l'endroit, ensuite à l'envers, et ainsi de suite.

Exemples

Voir Animations CSS pour les exemples.

Spécifications

Spécification État Commentaire
CSS Animations Level 3 {{ Spec2('CSS3 Animations') }} Pour les deux nouvelles valeurs reverse et alternate-reverse, voir cette discussion W3C.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} 10 {{ property_prefix("-ms") }} {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}
reverse 19 {{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
alternate-reverse 19 {{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

  • Animations CSS
  • {{ domxref("Event/AnimationEvent", "AnimationEvent") }}
  • {{ CSS_Reference:animation() }}

{{ languages( { "ja": "ja/CSS/animation-direction", "en": "en/CSS/animation-direction"} ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Résumé">Résumé</h2>
<p>La propriété CSS <code>animation-direction</code> précise si l'animation doit se jouer à l'envers ou selon des cycles alternés.</p>
<p>Il est souvent utile d'utiliser la propriété raccourcie {{ cssxref("animation") }} afin de définir toutes les propriétés en une seule fois.</p>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }} : <code>normal</code></li> <li>S'applique à : éléments de niveau bloc et éléments de niveau en ligne</li> <li>{{ Xref_cssinherited() }} : non</li> <li>Média : {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }} : comme spécifiée</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval syntaxbox">animation-direction: normal | alternate [, normal | alternate]*
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl> <dt><code>normal</code></dt> <dd>L'animation doit se jouer vers l'avant à chaque cycle. En d'autres termes, à chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau. Ceci est la valeur par défaut de cette propriété.</dd> <dt><code>alternate</code></dt> <dd>L'animation doit changer de sens à chaque cycle. Lorsqu'elle est jouée à l'envers, les étapes de l'animation sont appliquées à reculons. De plus, la temporisation est aussi inversée. Par exemple une animation <code>ease-in</code> est remplacée par une animation <code>ease-out</code> lorsqu'elle est jouée à l'envers.</dd> <dt><code>reverse</code></dt> <dd>L'animation est jouée à l'envers à chaque cycle. A chaque fois que l'animation fait un cycle, elle est réinitialisée à son début et recommence de nouveau.</dd> <dt><code>alternate-reverse</code></dt> <dd>Comme pour la valeur <code>alternate</code>, l'animation change de sens à chaque cycle. L'animation est jouée à l'envers lors du premier cycle, puis à l'endroit, ensuite à l'envers, et ainsi de suite.</dd>
</dl><h2 id="Exemples">Exemples</h2>
<p>Voir <a href="/fr/CSS/Animations_CSS" title="fr/CSS/Animations_CSS">Animations CSS</a> pour les exemples.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Spécification</th> <th scope="col">État</th> <th scope="col">Commentaire</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-" title="http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-">CSS Animations Level 3</a></td> <td>{{ Spec2('CSS3 Animations') }}</td> <td>Pour les deux nouvelles valeurs <code>reverse</code> et <code>alternate-reverse</code>, voir <a class=" external" href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html" title="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">cette discussion W3C</a>.</td> </tr> </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}</td> <td>10 {{ property_prefix("-ms") }} <a class="external" href="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations" title="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations"></a></td> <td>{{ CompatNo() }}</td> <td>4.0{{ property_prefix("-webkit") }}</td> </tr> <tr> <td><code>reverse</code></td> <td>19 {{ property_prefix("-webkit") }}<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=60525" title="https://bugs.webkit.org/show_bug.cgi?id=60525"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>alternate-reverse</code></td> <td>19 {{ property_prefix("-webkit") }}<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=60525" title="https://bugs.webkit.org/show_bug.cgi?id=60525"></a></td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2 id="Voir_également">Voir également</h2>
<ul> <li><a href="/fr/CSS/Animations_CSS" title="fr/CSS/Animations_CSS">Animations CSS</a></li> <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li> <li>{{ CSS_Reference:animation() }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/animation-direction", "en": "en/CSS/animation-direction"} ) }}</p>
Revenir à cette révision