animation-fill-mode

  • Raccourci de la révision : CSS/animation-fill-mode
  • Titre de la révision : animation-fill-mode
  • ID de la révision : 465195
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS animation-fill-mode spécifie comment une animation CSS doit appliquer la décoration à sa cible avant et après de s'exécuter.

{{cssbox("animation-fill-mode")}}

Syntaxe

Syntaxe formelle : {{csssyntax("animation-fill-mode")}}
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

Le # indique que plusieurs valeurs peuvent être données, séparées par des virgules.
Chacune s'applique à l'animation définie dans le même ordre que dans animation-name.
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none

Valeurs

none
L'animation n'applique pas de décoration à la cible avant ou après son exécution.
backwards
L'animation applique les valeurs définies aux keyframes « 0% » ou « from » dès qu'elle est appliquée à la cible, et les conserve durant la période {{ cssxref("animation-delay") }}.
forwards
La cible conserve les valeurs calculées définies par la dernière keyframe lors de l'exécution. Ce qui correspond généralement à la keyframe « 100% » ou « to », sauf si la propriété {{ cssxref("animation-direction") }} est définie à la valeur alternate et que {{ cssxref("animation-iteration-count") }} est définie à une valeur paire, auquel cas ce serait la keyframe « from » ou « 0% ».
both
L'animation suivra les règles pour les valeurs forwards et backwards, ce qui étend les propriétés de l'animation aux deux directions de lecture.

Exemples

h1 {
  animation-fill-mode: forwards;
}

Spécifications

Spécification Statut Commentaire
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }} {{ Spec2('CSS3 Animations') }}  

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") }} {{ CompatUnknown() }} 4.0{{ property_prefix("-webkit") }}
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() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>animation-fill-mode</code> spécifie comment une animation CSS doit appliquer la décoration à sa cible avant et après de s'exécuter.</p>
<p>{{cssbox("animation-fill-mode")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs" title="Syntaxe de définition des valeurs">Syntaxe formelle</a> : {{csssyntax("animation-fill-mode")}}
</pre>
<pre>
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

<strong>Le # indique que plusieurs valeurs peuvent être données, séparées par des virgules.
Chacune s'applique à l'animation définie dans le même ordre que dans </strong>animation-name<code>.</code>
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    L'animation n'applique pas de décoration à la cible avant ou après son exécution.</dd>
  <dt>
    <code>backwards</code></dt>
  <dd>
    L'animation applique les valeurs définies aux keyframes « 0% » ou « from » dès qu'elle est appliquée à la cible, et les conserve durant la période {{ cssxref("animation-delay") }}.</dd>
  <dt>
    <code>forwards</code></dt>
  <dd>
    La cible conserve les valeurs calculées définies par la dernière keyframe lors de l'exécution. Ce qui correspond généralement à la keyframe « 100% » ou « to », sauf si la propriété {{ cssxref("animation-direction") }} est définie à la valeur <code>alternate</code> et que {{ cssxref("animation-iteration-count") }} est définie à une valeur paire, auquel cas ce serait la keyframe « from » ou « 0% ».</dd>
  <dt>
    <code>both</code></dt>
  <dd>
    L'animation suivra les règles pour les valeurs <code>forwards</code> et <code>backwards</code>, ce qui étend les propriétés de l'animation aux deux directions de lecture.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="deki-transform">
h1 {
  animation-fill-mode: forwards;
}
</pre>
<h2 id="Sp.C3.A9cifications">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">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td>
      <td>{{ Spec2('CSS3 Animations') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">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") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>4.0{{ property_prefix("-webkit") }}</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_.C3.A9galement">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>
Revenir à cette révision