---
title: "CSS animation-fill-mode Property Tutorial"
url: https://weworkworldwide.com/tutorials/css-animation-fill-mode-property-tutorial/
description: "In this section, we will learn what the animation-fill-mode property is and how to use it in CSS. Click here to run the example of animation-fill-mode prop"
date: 2026-09-04T13:00:04+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS animation-fill-mode Property Tutorial
In this section, we will learn what the animation-fill-mode property is and how to use it in CSS.
Click here to run the example of animation-fill-mode property.
## CSS animation-fill-mode Property Definition and Usage
The thing about CSS *animation* is that it can’t affect the target element before the animation begins (during the animation delay time) and after it finished. Basically, after the animation finished, the style of the element will return to what it was before the applied animation.
But CSS provided a property named `animation-fill-mode` that allows us to override this behavior.
Using this property, we can apply the style set in the first key-frame or last key-frame of the animation to the element, before and after the animation played.
## CSS animation-fill-mode Property Syntax
``` line-numbers
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
```
## CSS animation-fill-mode Property Value
Here’s the list of values we can set for this property:
- **none**: This is the default behavior and it means
no style of the animation should be applied to the target element before
or after the animation played.
- **backwards**: it means while the element is in
animation-delay time, apply the style that is set in the first key-frame
of the animation, to the target element. (depending on *animation
direction* and *animation-iteration-count*, the first key-frame
might end up being actually the last key-frame)
- **forwards**: it means after an animation finished,
apply the style that is set in the last key-frame of the animation, to
the target element. (depending on *animation direction* and
*animation-iteration-count*, the last key-frame might end up being
actually the first key-frame)
- **both**: it means while the element is in
*animation-delay time*, apply the style that is set in the first
key-frame of the animation to the target element and after the animation
finished, apply the style that is set in the last key-frame of the
animation, to the target element.
## Example: animation-fill-mode property in CSS
``` line-numbers
CSS is fun :)
- Animation Fill Mode is: backwards
```
## How Does CSS animation-fill-mode Property Work?
In the example above, because the value of the animation-fill-mode is set to “backwards”, while the element is in animation-delay time, its background color becomes light-coral which is the style set for the first key-frame of the animation.
## Example: CSS animation-fill-mode “forwards” value
``` line-numbers
CSS is fun :)
- Animation Fill Mode is:forwards
```
In the example above, because the value of the `animation-fill-mode` is set to “forwards”, after the animation finished its execution, the background-color of the element becomes light-sky-blue which is the style set for the last key-frame of the animation.