animation-fill-mode
The animation-fill-mode property specifies how an element is styled before and after an animation runs.
Formal Syntax
<single-animation-fill-mode>#
JavaScript Access
// Access via element.style
element.style.animationFillMode = 'none';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| animation-fill-mode | 43 | 16 | 9 | 12 |
| backwards | 3 | 5 | 5 | 12 |
| both | 3 | 5 | 5 | 12 |
| forwards | 3 | 5 | 5 | 12 |
| none | 3 | 5 | 5 | 12 |
Related Properties
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range
- animation-range-end
- animation-range-start
- animation-timeline
- animation-timing-function
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- timeline-scope
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- view-timeline
- view-timeline-axis
- view-timeline-inset
- view-timeline-name
- view-transition-class
- view-transition-name
- view-transition-group ๐งช
- animation-range-center ๐ง
- animation-trigger ๐ง
- timeline-trigger ๐ง
- timeline-trigger-exit-range ๐ง
- timeline-trigger-exit-range-end ๐ง
- timeline-trigger-exit-range-start ๐ง
- timeline-trigger-name ๐ง
- timeline-trigger-range ๐ง
- timeline-trigger-range-end ๐ง
- timeline-trigger-range-start ๐ง
- timeline-trigger-source ๐ง