mozilla

Revision 22163 of animation-fill-mode

  • Revision slug: CSS/animation-fill-mode
  • Revision title: animation-fill-mode
  • Revision id: 22163
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 1 words added, 1 words removed

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: block-level and inline-level 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 'to' 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;
}

Browser compatibility

{{ CompatibilityTable() }}

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

Specifications

  • {{ spec("http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-", "CSS Animations Module Level 3: animation-fill-mode", "ED") }}

See also

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

{{ languages( { "ja": "ja/CSS/animation-fill-mode"} ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2>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> <li>{{ Xref_cssinitial() }}: <code>none</code></li> <li>Applies to: block-level and inline-level elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre>animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*
</pre>
<h3>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 '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 'to' keyframe.</dd> <dt>backwards</dt> <dd>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.</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>Examples</h2>
<pre class="brush: css">h1 {
  animation-fill-mode: forwards;
}
</pre>
<h2 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") }}</td> <td>10 {{ property_prefix("-ms") }} <a class="external" href="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations" title="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations"></a></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>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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>Specifications</h2>
<ul> <li>{{ spec("http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-", "CSS Animations Module Level 3: animation-fill-mode", "ED") }}</li>
</ul>
<h2>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>
<p>{{ languages( { "ja": "ja/CSS/animation-fill-mode"} ) }}</p>
Revert to this revision