Revision 520469 of animation-fill-mode

  • Revision slug: Web/CSS/animation-fill-mode
  • Revision title: animation-fill-mode
  • Revision id: 520469
  • Created:
  • Creator: codepo8
  • 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.

{{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;
}

Example

You can see the effect of animation-fill-mode in the following example.  For animations that run for an infinite time, you might want them to end on the last state rather than the first.

HTML Content

<p>Move your mouse over the grey box</p>
<div class="demo">
  <div class="grows">This just grows</div>
  <div class="growsandstays">This grows and stays big</div>
</div>

CSS Content

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo .grows {
    animation-name: grow;
    animation-duration: 3s;
}
.demo .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

{{ EmbedLiveSample('Example') }}

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

<div>
 {{ CSSRef() }}</div>
<div>
 {{ SeeCompatTable() }}</div>
<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 name="Example">Example</h2>
<p>You can see the effect of animation-fill-mode in the following example.&nbsp; For animations that run for an infinite time, you might want them to end on the last state rather than the first.</p>
<h3>HTML Content</h3>
<pre class="brush: html">
&lt;p&gt;Move your mouse over the grey box&lt;/p&gt;
&lt;div class="demo"&gt;
&nbsp; &lt;div class="grows"&gt;This just grows&lt;/div&gt;
&nbsp; &lt;div class="growsandstays"&gt;This grows and stays big&lt;/div&gt;
&lt;/div&gt;</pre>
<h3>CSS Content</h3>
<pre class="brush: css">
.demo {
&nbsp; border-top: 100px solid #ccc;
&nbsp; height: 300px;
}
@keyframes grow {
&nbsp;&nbsp;&nbsp; 0% { font-size: 0 }
&nbsp;&nbsp;&nbsp; 100% { font-size: 40px }
}
.demo .grows {
&nbsp;&nbsp;&nbsp; animation-name: grow;
&nbsp;&nbsp;&nbsp; animation-duration: 3s;
}
.demo .growsandstays {
&nbsp;&nbsp;&nbsp; animation-name: grow;
&nbsp;&nbsp;&nbsp; animation-duration: 3s;
&nbsp;&nbsp;&nbsp; animation-fill-mode: forwards;
}</pre>
<p>{{ EmbedLiveSample('Example') }}</p>
<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