animation-fill-mode

  • Revision slug: CSS/animation-fill-mode
  • Revision title: animation-fill-mode
  • Revision id: 289791
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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.

  • {{ Xref_cssinitial() }}: none
  • Applies to: all elements, and {{ cssxref("::before") }} and {{ cssxref("::after") }} pseudo-elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*

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. This is usually the 100% or to keyframe, unless {{ cssxref("animation-direction") }} is alternate and {{ cssxref("animation-iteration-count") }} is set to an even number, in which case it is the 0% or from keyframe.
backwards
The animation will apply the values defined in the 0% or from keyframe as soon as it is applied to the target, and retain this during the {{ cssxref("animation-delay") }} period.
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
CSS Animations Level 3 {{ 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") }} 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

  • CSS animations
  • {{ domxref("Event/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>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>none</code></li>
  <li><dfn>Applies to:</dfn> all elements, and {{ cssxref("::before") }} and {{ cssxref("::after") }} <a href="/en/CSS/Pseudo-elements" title="Pseudo-elements">pseudo-elements</a></li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    none</dt>
  <dd>
    The animation will not apply any styles to the target before or after it is executing.</dd>
  <dt>
    forwards</dt>
  <dd>
    The target will retain the computed values set by the last keyframe encountered during execution. This is usually the <code>100%</code> or <code>to</code> <a href="http://@keyframes" title="http://@keyframes">keyframe</a>, unless {{ cssxref("animation-direction") }} is <code>alternate</code> and {{ cssxref("animation-iteration-count") }} is set to an even number, in which case it is the <code>0%</code> or <code>from</code> <a href="http://@keyframes" title="http://@keyframes">keyframe</a>.</dd>
  <dt>
    backwards</dt>
  <dd>
    The animation will apply the values defined in the <code>0%</code> or <code>from</code> <a href="http://@keyframes" title="http://@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the {{ cssxref("animation-delay") }} period.</dd>
  <dt>
    both</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" style="margin-left: ;">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property" title="http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-">CSS Animations Level 3</a></td>
      <td>{{ Spec2('CSS3 Animations') }}</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="margin-left: ;">Browser compatibility</h2>
<p style="margin-left: ;">{{ 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") }}</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/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li>
  <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li>
  <li>{{ CSS_Reference:animation() }}</li>
</ul>
Revert to this revision