The animation-fill-mode
CSS property sets how a CSS animation applies styles to its target before and after its execution.
It is often convenient to use the shorthand property animation
to set all animation properties at once.
/* Single animation */ animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; /* Multiple animations */ animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
none
forwards
animation-direction
and 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
animation-delay
period. The first relevant keyframe depends on the value of animation-direction
: animation-direction | first relevant keyframe |
---|---|
normal or alternate
|
0% or from
|
reverse or alternate-reverse
|
100% or to
|
both
Note: When you specify multiple comma-separated values on an animation-*
property, they will be assigned to the animations specified in the animation-name
property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
<single-animation-fill-mode>#where
<single-animation-fill-mode> = none | forwards | backwards | both
You can see the effect of animation-fill-mode
in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).
<p>Move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">This grows and stays big.</div> <div class="grows">This just grows.</div> </div>
.demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; }
See CSS animations for more examples.
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-fill-mode' in that specification. | Working Draft | Initial definition. |
Initial value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 43
|
12
|
16
|
10 | 30
|
Yes
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 43
|
43
|
Yes
|
16
|
30
|
Yes
|
4.0
|
AnimationEvent
API
© 2005–2018 Mozilla Developer Network and individual 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