CSS animation-fill-mode Property

animation-fill-mode defines a style for when the animation stops.

This can be before or after the animation, or both.

Example

#

An element with animation-fill-mode set to forwards.
When the animation ends, the final element style will be applied.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
  
    animation: moveAnimation 5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes moveAnimation {
    from { transform: none; 
           background-color: steelblue; }
    to { transform: translateX(375%) rotate(210deg); 
         background-color: midnightblue; }
  }
</style>

<div class="animate"></div>

Syntax

animation-fill-mode: none | forwards | backwards | 
                     both | initial | inherit;

Values

#

This table lists the animation-fill-mode property values.

Value Description
none Default. No styles will be applied to the element before or after the animation is executing
forwards Element will use the style values set by the last keyframe (depends on animation-fill-mode and animation-iteration-count)
backwards Element will use the style values that are set by the first keyframe (depends on animation-fill-mode), and retain this during the animation-delay period
both The animation will follow the rules for both forwards and backward, extending the animation properties in both directions
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-fill-mode values. The animation runs just once. To repeat refresh the page.

<style> 
  .my-animate {
    width: 80px;
    height: 80px;
    background-color: steelblue;
  
    animation-name: stretchAnimation;
    animation-duration: 5s;
    animation-fill-mode: backwards;
  }

  @keyframes stretchAnimation {
    from { width: 80px; background-color: steelblue; }
    to { width: 350px; background-color: orangered; }
  }
</style>

<div class="my-animate"></div>

Browser support

This table shows when animation-fill-mode support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides