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 : 465207
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • 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.
forwards
La cible conserve les valeurs calculées définies par la dernière keyframe rencontrée lors de l'exécution. La dernière keyframe rencontrée dépend de la valeur de {{Cssxref("animation-direction")}} et {{Cssxref("animation-iteration-count")}} :
animation-direction animation-iteration-count dernière keyframe rencontrée
normal pair ou impair 100% ou to
reverse pair ou impair 0% ou from
alternate pair 0% ou from
alternate impair 100% ou to
alternate-reverse pair 100% ou to
alternate-reverse impair 0% ou from
backwards
L'animation appliquera les valeurs définies dans la première keyframe pertinente dès qu'elle est appliquée à la cible, et conservera ces valeurs durant la période {{Cssxref("animation-delay")}}. La première keyframe pertinent dépend de la valeur de {{Cssxref("animation-direction")}} :
animation-direction première keyframe pertinente
normal or alternate 0% ou from
reverse or alternate-reverse 100% ou to
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>forwards</code></dt>
  <dd>
    La cible conserve les valeurs calculées définies par la dernière keyframe rencontrée lors de l'exécution. La dernière keyframe rencontrée dépend de la valeur de {{Cssxref("animation-direction")}} et {{Cssxref("animation-iteration-count")}} :<br />
    <table class="standard-table">
      <thead>
        <tr>
          <th scope="col"><code>animation-direction</code></th>
          <th scope="col"><code>animation-iteration-count</code></th>
          <th scope="col">dernière keyframe rencontrée</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>normal</code></td>
          <td>pair ou impair</td>
          <td><code>100%</code> ou <code>to</code></td>
        </tr>
        <tr>
          <td><code>reverse</code></td>
          <td>pair ou impair</td>
          <td><code>0%</code> ou <code>from</code></td>
        </tr>
        <tr>
          <td><code>alternate</code></td>
          <td>pair</td>
          <td><code>0%</code> ou <code>from</code></td>
        </tr>
        <tr>
          <td><code>alternate</code></td>
          <td>impair</td>
          <td><code>100%</code> ou <code>to</code></td>
        </tr>
        <tr>
          <td><code>alternate-reverse</code></td>
          <td>pair</td>
          <td><code>100%</code> ou <code>to</code></td>
        </tr>
        <tr>
          <td><code>alternate-reverse</code></td>
          <td>impair</td>
          <td><code>0%</code> ou <code>from</code></td>
        </tr>
      </tbody>
    </table>
  </dd>
  <dt>
    <code>backwards</code></dt>
  <dd>
    L'animation appliquera les valeurs définies dans la première keyframe pertinente dès qu'elle est appliquée à la cible, et conservera ces valeurs durant la période {{Cssxref("animation-delay")}}. La première keyframe pertinent dépend de la valeur de {{Cssxref("animation-direction")}} :
    <table class="standard-table">
      <thead>
        <tr>
          <th scope="col"><code>animation-direction</code></th>
          <th scope="col">première keyframe pertinente</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>normal</code> or <code>alternate</code></td>
          <td><code>0%</code> ou <code>from</code></td>
        </tr>
        <tr>
          <td><code>reverse</code> or <code>alternate-reverse</code></td>
          <td><code>100%</code> ou <code>to</code></td>
        </tr>
      </tbody>
    </table>
  </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