animation-fill-mode

Definition

In CSS, the animation-fill-mode property specifies how an element should be styled when an animation is not actively running. It is used in conjunction with the animation property, which is a shorthand property for setting all the animation properties in one declaration.

Examples

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

In this example, the animation-fill-mode property is set to backwards, which means that when the animation is not running, the element will be styled according to the first keyframe of the animation (in this case, the element will be translated 100 pixels to the right).

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}

In this example, the animation-fill-mode property is set to both, which means that when the animation is not running, the element will be styled according to both the first and last keyframes of the animation (in this case, the element will alternate between being translated 0 and 100 pixels to the right).

Values

Best Practices

• Use the animation-fill-mode property to control the styling of the element when the animation is not running. This can be especially useful when creating transitions between different states of an element.
• Consider the context in which the animation is used when choosing a value for the animation-fill-mode property. For example, if you are using the animation to create a hover effect, you may want to use the forwards value to keep the element in the hover state when the mouse is not hovering over it.
• Test the animation on a variety of devices and browsers to ensure that it works as intended. Different devices and browsers may have different performance characteristics, so it's important to test the animation to ensure that it looks and feels smooth on all platforms.
• Use the animation-fill-mode property in combination with other animation properties, such as animation-duration and animation-timing-function, to fine-tune the behavior of the animation.
• Keep in mind that the animation-fill-mode property only applies to the styling of the element, and does not affect the actual animation itself. In other words, the keyframes of the animation will still run as normal, but the element will maintain the specified styling when the animation is not running.

Browser Compatibility