CSS animation-fill-mode property defines what values are applied by the animation outside its execution time window. These two periods are considered outside animation:
- During delay when animation has not started
- After animation has finished
In case animation-name has multiple values, animation-fill-mode can also have multiple values.
CSS property animation-fill-mode
| CSS version: | CSS 3 |
| Value: | [none | forwards | backwards | both] [, ...]* |
| Initial: | none |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
animation-fill-mode values
| value | When is it applicable | Description |
|---|---|---|
| none | - | The animation has no effect outside its execution time window |
| forwards | Property after end of animation |
|
| backwards | Property during delay period | During the period defined by animation-delay, the property values defined in the first iteration keyframe will apply |
| both | Property during and after end of animation | The effects of both forwards and backwards fill apply |
Example – animation-fill-mode
In the following code, CSS property animation-fill-mode can be changed to the following values
- none
- forwards
- backwards
- both
<style>
@keyframes left-to-right {
0% {left:0;top:0;}
100% {left:200px;top:0;}
}
.box {
z-index:1; position:fixed; left: 100px; top:100px;
background-color:lightgreen;
animation-name:left-to-right;
animation-duration:4s; animation-delay:2s;
animation-fill-mode:none;
}
.obj-init-pos {position:fixed; left:100px; top:100px; color:#ccc;}
.ani-start-pos {position:fixed; left:0; top:0; color:#ccc;}
.ani-end-pos {position:fixed; left:200px; top:0; color:#ccc;}
</style>
<div class="box">Object</div>
<div class="obj-init-pos">Object initial position</div>
<div class="ani-start-pos">Animation start position</div>
<div class="ani-end-pos">Animation end position</div>animation-fill-mode refresh
Few points to note in above example:
| animation-fill-mode value | Behaviour |
|---|---|
| none | Object stays at original position during delay and comes back at original position after animation |
| forwards | Object stays at original position during delay and remains at animation end position after animation |
| backwards | Object take animation start position even during delay and comes back at original position after animation |
| both | Object take animation start position even during delay and remains at animation end position after animation |
