CSS animation-fill-mode Property
The animation-fillmode property defines how properties from the keyframes are applied to an element before the animation starts or after the animation ends (or both).
Syntax -
|
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
|
The values of syntax are -
1. none
The element is yellow for 2 seconds.
It then immediately switches to red, and over the next 2 seconds, it transitions to blue.
After the animation completes, the background color immediately switches back to yellow.
With none, the styles in the keyframes are only applied for the duration of the animation.
This is the default behavior.
2. Forwards
The element is yellow for 2 seconds.
It then immediately switches to red, and the animation runs over the next 2 seconds, transitioning to blue.
After the animation completes, the background color stays blue.
With forwards, the styles from the last keyframe of the animation remain applied to the element after the animation ends.
3. backwards
The element immediately becomes red, which it remains for the next 2 seconds. Then the animation runs for 2 seconds, transitioning to blue. Once the animation is done, the background color immediately switches back to yellow. With backwards, the styles from the first keyframe are applied during the animation delay period.
4. Both
The element immediately becomes red for 2 seconds.
Then the animation runs for 2 seconds, transitioning to blue.
Once the animation is done, the element remains blue. With both, you get the effects of forwards and backward.
Now we will see Example -
Example -
|
<style>
@keyframes color {
from {
background: red;
}
to {
background: blue;
}
}
.animate {
background: yellow;
animation: color 2s;
animation-delay: 2s;
width: 10rem;
height: 10rem;
}
</style>
<div class="animate"></div>
|
Output -
We have a box that is yellow.
It animates its background color starting from red, transitioning to blue.
The animation happens over the course of two seconds, and there is a 2-second delay before it starts.
Let’s examine the different values that animation-fill-mode accepts and what effect they will have on this element’s animation.
