CSS - animation-fill-mode
The animation-fill-mode
CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
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; font-family: sans-serif; } @keyframes grow { 0% { font-size: 0 } 100% { font-size: 40px } } @-webkit-keyframes grow { 0% { font-size: 0 } 100% { font-size: 40px } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; -webkit-animation-name: grow; -webkit-animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; -webkit-animation-name: grow; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: forwards; }
Syntax
animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* Several values may be given, separated by commas. */ /* Each applies for each animation in animation-name<code>.</code> */ 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
animation-direction
andanimation-iteration-count
:animation-direction
animation-iteration-count
last keyframe encountered normal
even or odd 100%
orto
reverse
even or odd 0%
orfrom
alternate
even 0%
orfrom
alternate
odd 100%
orto
alternate-reverse
even 100%
orto
alternate-reverse
odd 0%
orfrom
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
animation-delay
period. The first relevant keyframe depends on the value ofanimation-direction
:animation-direction
first relevant keyframe normal
oralternate
0%
orfrom
reverse
oralternate-reverse
100%
orto
both
- The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
Formal syntax
<a href="css/animation-fill-mode#single-animation-fill-mode"><single-animation-fill-mode></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><single-animation-fill-mode> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> forwards <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> backwards <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> both</code></p>
Description
The animation-fill-mode
CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.
Initial value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-fill-mode' in that specification. |
Working Draft | Initial definition |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12-o 12.10 |
4.0-webkit |
Feature | Android | Chrome | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? | ? |
[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/animation-fill-mode