animation-fill-mode

« CSS « CSS Reference

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

Summary

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

Syntax

animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*

Values

none
The animation will not apply any styles to the target before or after it is executing.
forwards
The target will retain the computed values set by the last keyframe encountered during execution. This is usually the '100%' or 'to' keyframe, unless animation-direction is 'alternate' and animation-iteration-count is set to an even number, in which case it is the '0%' or 'from' keyframe.
backwards
The animation will apply the values defined in the '0%' or 'from' keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
both
The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Examples

h1 {
  animation-fill-mode: forwards;
}

Specifications

Specification Status Comment
CSS Animations Level 3 Working Draft  

Browser compatibility

  • Desktop
  • Mobile

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

(Yes) -webkit

5.0 (5.0) -moz

10 -ms [1]

12 -o

4.0 -webkit

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

?

?

?

?

Tags (3)

Edit tags

Attachments (0)

 

Attach file