YouTip

# CSS3 animation-fill-mode Property The `animation-fill-mode` property specifies how a CSS animation applies styles to its target element before and after its execution (i.e., during an animation delay or after the animation has finished playing). By default, a CSS animation does not affect the style of an element before the first keyframe is played, and it stops affecting the element as soon as the last keyframe finishes. The `animation-fill-mode` property allows you to override this default behavior. --- ## Quick Example To animate an element from one position to another and have it stay at the destination rather than snapping back to its original position, use `animation-fill-mode: forwards`: ```css .animated-box { animation-name: slide; animation-duration: 3s; animation-fill-mode: forwards; /* Safari and Chrome support */ -webkit-animation-fill-mode: forwards; } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports the property. Numbers followed by `-webkit-`, `-moz-`, or `-o-` specify the first version that supported the property with a vendor prefix. | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **animation-fill-mode** | 4.0 `-webkit-` | 10.0 | 16.0
5.0 `-moz-` | 4.0 `-webkit-` | 15.0 `-webkit-`
12.1
12.0 `-o-` | --- ## Property Specifications | Feature | Description | | :--- | :--- | | **Default Value:** | `none` | | **Inherited:** | No | | **Animatable:** | No | | **CSS Version:** | CSS3 | | **JavaScript Syntax:** | `object.style.animationFillMode = "forwards"` | --- ## CSS Syntax ```css animation-fill-mode: none | forwards | backwards | both | initial | inherit; ``` ### Property Values | Value | Description | | :--- | :--- | | `none` | **Default value.** The animation will not apply any styles to the element before or after it executes. The element returns to its original state once the animation completes. | | `forwards` | After the animation ends (as determined by `animation-iteration-count`), the element retains the style values set by the last keyframe encountered during execution. | | `backwards` | The element will apply the style values defined in the first keyframe immediately when the animation is applied, even during the `animation-delay` period. The first keyframe is defined by the `from` keyframe (when `animation-direction` is `normal` or `alternate`) or the `to` keyframe (when `animation-direction` is `reverse` or `alternate-reverse`). | | `both` | The animation follows the rules for both `forwards` and `backwards`. The styles of the first keyframe are applied during the delay period, and the styles of the last keyframe are retained after the animation ends. | | `initial` | Sets this property to its default value (`none`). | | `inherit` | Inherits this property from its parent element. | --- ## Detailed Code Examples ### 1. Retaining the End State (`forwards`) This example moves a box 200px to the right. When the animation ends, the box remains at `left: 200px` instead of jumping back to `left: 0`. ```css .box-forwards { width: 100px; height: 100px; background-color: red; position: relative; animation-name: moveRight; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes moveRight { from { left: 0px; } to { left: 200px; background-color: blue; } } ``` ### 2. Applying Initial Styles During Delay (`backwards`) In this example, there is a 2-second delay before the animation starts. Because `backwards` is used, the box will immediately turn blue (the `from` keyframe color) as soon as the page loads, rather than waiting 2 seconds to change from red to blue. ```css .box-backwards { width: 100px; height: 100px; background-color: red; /* Original color */ position: relative; animation-name: colorChange; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: backwards; } @keyframes colorChange { from { background-color: blue; } to { background-color: green; } } ``` ### 3. Combining Both Behaviors (`both`) Using `both` ensures that the element gets the start keyframe styles during the delay period, and retains the end keyframe styles after the animation finishes. ```css .box-both { width: 100px; height: 100px; background-color: red; position: relative; animation-name: slideAndColor; animation-duration: 3s; animation-delay: 1s; animation-fill-mode: both; } @keyframes slideAndColor { from { left: 50px; background-color: yellow; } to { left: 250px; background-color: purple; } } ``` --- ## Key Considerations 1. **Interaction with `animation-direction`**: The "first" and "last" keyframes used by `backwards` and `forwards` depend on the `animation-direction` property. For example, if `animation-direction` is set to `reverse`, the "last" keyframe executed is actually the `from` keyframe, so `forwards` will retain the styles defined in `from`. 2. **Interaction with `animation-iteration-count`**: The `forwards` state is evaluated at the end of the final iteration. If `animation-iteration-count` is set to `infinite`, `forwards` has no visible effect because the animation never reaches a final completed state.