CSS animation-fill-mode Property

Description

The animation-fill-mode property defines what values are applied by the animation outside the time it is executing. By default, an animation will not affect property values between the time it is applied (the animation-name property is set on an element) and the time it begins execution (which is determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (determined by the animation-duration property). The animation-fill-mode property can override this behavior.

Initial value

none

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.animationFillMode

Interactive Demo

animation-fill-mode: none;

animation-fill-mode: forwards;

animation-fill-mode: backwards;

animation-fill-mode: both;

Syntax

animation-fill-mode: <single-animation-fill-mode> [ ',' <single-animation-fill-mode> ]* 

Values

• noneThe animation will not apply any styles to the target before or after it is executing.
• forwardsThe target will retain the computed values set by the last keyframe encountered during execution.
• backwardsThe animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
• bothThe animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Example

<p>Move your mouse over the gray box!</p>

<div class="demo">

 <div class="growsandstays">This grows and stays big.</div>

  <div class="grows">This just grows.</div>

</div>

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% { font-size: 0; }
  100% { font-size: 40px; }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Browser Support

The following table will show you the current browser support for the CSS animation-fill-mode property.

Desktop
12	43	16	30	9

Tablets / Mobile
43	16	30	9	4	43

Last updated by CSSPortal on: 31st December 2023