animation-fill-mode

  • Revision slug: CSS/animation-fill-mode
  • Revision title: animation-fill-mode
  • Revision id: 374581
  • Created:
  • Creator: enderandpeter
  • Is current revision? No
  • Comment "depends on the value of" instead of " depends of the value of"

Revision Content

{{ CSSRef() }} {{ SeeCompatTable() }}

Summary

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

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

Syntax

Formal syntax: {{csssyntax("animation-fill-mode")}}
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in animation-name.
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none

Values

none
The animation will not apply any styles to the target before or after it is executing.
forwards
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of {{ cssxref("animation-direction") }} and {{ cssxref("animation-iteration-count") }}:
animation-direction animation-iteration-count last keyframe encountered
normal even or odd 100% or to
reverse even or odd 0% or from
alternate even 0% or from
alternate odd 100% or to
alternate-reverse even 100% or to
alternate-reverse odd 0% or from
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the {{ cssxref("animation-delay") }} period. The first relevant keyframe depends of the value of {{ cssxref("animation-direction") }}:
animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
both
The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Examples

h1 {
  animation-fill-mode: forwards;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }} {{ Spec2('CSS3 Animations') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10 12{{ property_prefix("-o") }}
12.10 #
4.0{{ property_prefix("-webkit") }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
{{ CompatGeckoMobile("16.0") }}
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • Using CSS animations
  • {{ domxref("AnimationEvent", "AnimationEvent") }}
  • {{ CSS_Reference:animation() }}

Revision Source

<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>animation-fill-mode</code> <a href="/en/CSS" title="CSS">CSS</a> property specifies how a CSS animation should apply styles to its target before and after it is executing.</p>
<p>{{cssbox("animation-fill-mode")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("animation-fill-mode")}}
</pre>
<pre>
animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

<strong>The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in </strong>animation-name<code>.</code>
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    The animation will not apply any styles to the target before or after it is executing.</dd>
  <dt>
    <code>forwards</code></dt>
  <dd>
    The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of {{ cssxref("animation-direction") }} and {{ 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">last keyframe encountered</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>normal</code></td>
          <td>even or odd</td>
          <td><code>100%</code> or <code>to</code></td>
        </tr>
        <tr>
          <td><code>reverse</code></td>
          <td>even or odd</td>
          <td><code>0%</code> or <code>from</code></td>
        </tr>
        <tr>
          <td><code>alternate</code></td>
          <td>even</td>
          <td><code>0%</code> or <code>from</code></td>
        </tr>
        <tr>
          <td><code>alternate</code></td>
          <td>odd</td>
          <td><code>100%</code> or <code>to</code></td>
        </tr>
        <tr>
          <td><code>alternate-reverse</code></td>
          <td>even</td>
          <td><code>100%</code> or <code>to</code></td>
        </tr>
        <tr>
          <td><code>alternate-reverse</code></td>
          <td>odd</td>
          <td><code>0%</code> or <code>from</code></td>
        </tr>
      </tbody>
    </table>
  </dd>
  <dt>
    <code>backwards</code></dt>
  <dd>
    The animation will apply the values defined in the first relevant <a href="/en-US/docs/CSS/@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the {{ cssxref("animation-delay") }} period. The first relevant keyframe depends of the value of {{ cssxref("animation-direction") }}:
    <table class="standard-table">
      <thead>
        <tr>
          <th scope="col"><code>animation-direction</code></th>
          <th scope="col">first relevant keyframe</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>normal</code> or <code>alternate</code></td>
          <td><code>0%</code> or <code>from</code></td>
        </tr>
        <tr>
          <td><code>reverse</code> or <code>alternate-reverse</code></td>
          <td><code>100%</code> or <code>to</code></td>
        </tr>
      </tbody>
    </table>
  </dd>
  <dt>
    <code>both</code></dt>
  <dd>
    The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
h1 {
  animation-fill-mode: forwards;
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</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="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br />
          {{ CompatGeckoDesktop("16.0") }}</td>
        <td>10</td>
        <td>12{{ property_prefix("-o") }}<br />
          12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
        <td>4.0{{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br />
          {{ CompatGeckoMobile("16.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
  <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
  <li>{{ CSS_Reference:animation() }}</li>
</ul>
Revert to this revision