Animations (CSS) | Frontend Practical Guide

Widely availableUseful when Animations (CSS) improves perceived continuity or state change, but motion should remain optional and purposeful.

Overview

The animation CSS property animates an element's style over time, using keyframes described in @keyframes rules.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`animation`	43	12	16	9	43	9
DOM API
`AnimationEvent` The AnimationEvent interface represents events providing information related to animations.	43	12	5	9	43	9
`AnimationEvent` The AnimationEvent() constructor returns a new AnimationEvent object, representing an event in relation with an animation.	43	14	23	9	43	9
`animationName` The AnimationEvent.animationName read-only property is a string containing the value of the animation-name CSS property associated with the transition.	43	12	5	9	43	9
`elapsedTime` The AnimationEvent.elapsedTime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an Element/animationstart_event event, elapsedTime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with…	43	12	5	9	43	9
`pseudoElement` The AnimationEvent.pseudoElement read-only property is a string, starting with '::', containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: ''.	68	79	23	13.1	68	13.4
`CSSAnimation` The CSSAnimation interface of the Web Animations API represents an Animation object.	84	84	75	13.1	84	13.4
`animationName` The animationName property of the CSSAnimation interface returns the animation-name. This specifies one or more keyframe at-rules which describe the animation applied to the element.	84	84	75	13.1	84	13.4
`CSSKeyframeRule` The CSSKeyframeRule interface describes an object representing a set of styles for a given keyframe. It corresponds to the contents of a single keyframe of a @keyframes at-rule.	31	12	48	9	31	9
`keyText` The keyText property of the CSSKeyframeRule interface represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.	1	12	5	4	18	4
`style` The read-only style property of the CSSKeyframeRule interface contains a CSSStyleDeclaration object representing the descriptors available in the @keyframes rule's body.	1	12	5	4	18	3.2
`CSSKeyframesRule` The CSSKeyframesRule interface describes an object representing a complete set of keyframes for a CSS animation. It corresponds to the contents of a whole @keyframes at-rule.	31	12	48	9.1	31	9.3
`appendRule` The appendRule() method of the CSSKeyframeRule interface appends a CSSKeyFrameRule to the end of the rules.	41	12	21	9.1	41	9.3
`cssRules` The read-only cssRules property of the CSSKeyframeRule interface returns a CSSRuleList containing the rules in the keyframes at-rule.	1	12	5	4	18	3.2
`deleteRule` The deleteRule() method of the CSSKeyframeRule interface deletes the CSSKeyFrameRule that matches the specified keyframe selector.	1	12	5	4	18	3.2
`findRule` The findRule() method of the CSSKeyframeRule interface finds the CSSKeyFrameRule that matches the specified keyframe selector.	1	12	5	4	18	3.2
`length` The read-only length property of the CSSKeyframesRule interface returns the number of CSSKeyframeRule objects in its list. You can then access each keyframe rule by its index directly on the CSSKeyframeRule object.	123	123	109	17	123	17
`name` The name property of the CSSKeyframeRule interface gets and sets the name of the animation as used by the animation-name property.	1	12	5	4	18	3.2
Other
`css.at-rules.keyframes` The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.	43	12	16	9	43	9
CSS at-rule
`ignore important declarations` Ignore `!important` declarations	45	79	19	10.1	45	10.3
`named range keyframes` Named timeline range keyframe selectors	115	115		26	115	26
Other
`css.properties.animation-delay` The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.	43	12	16	9	43	9
`css.properties.animation-direction` The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.	43	12	16	9	43	9
CSS property
`alternate`	3	12	5	4	18	3.2
`alternate-reverse`	19	12	16	6	25	6
`normal`	3	12	5	4	18	3.2
`reverse`	19	12	16	6	25	6
Other
`css.properties.animation-duration` The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.	43	12	16	9	43	9
CSS property
`auto` `auto` value	115	115		18.4	115	18.4
Other
`css.properties.animation-fill-mode` The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.	43	12	16	9	43	9
CSS property
`backwards`	3	12	5	5	18	4.2
`both`	3	12	5	5	18	4.2
`forwards`	3	12	5	5	18	4.2
`none`	3	12	5	5	18	4.2
Other
`css.properties.animation-iteration-count` The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.	43	12	16	9	43	9
CSS property
`infinite`	3	12	5	4	18	3.2
Other
`css.properties.animation-name` The animation-name CSS property specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element. Multiple @keyframes at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframes at-rule, no properties are animated.	43	12	16	9	43	9
CSS property
`none`	3	12	5	4	18	3.2
Other
`css.properties.animation-play-state` The animation-play-state CSS property sets whether an animation is running or paused.	43	12	16	9	43	9
CSS property
`paused`	3	12	5	4	18	3.2
`running`	3	12	5	4	18	3.2
Other
`css.properties.animation-timing-function` The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.	43	12	16	9	43	9
CSS property
`ease`	3	12	5	4	18	3.2
`ease-in`	3	12	5	4	18	3.2
`ease-in-out`	3	12	5	4	18	3.2
`ease-out`	3	12	5	4	18	3.2
`jump` `jump-` keywords for `steps()`	77	79	65	14	77	14
`linear`	3	12	5	4	18	3.2
`step-end`	3	12	5	4	18	3.2
`step-start`	3	12	5	4	18	3.2
`alternate`	3	12	5	4	18	3.2
`alternate-reverse`	3	12	5	4	18	3.2
`auto`	3	12	5	4	18	3.2
`backwards`	3	12	5	4	18	3.2
`both`	3	12	5	4	18	3.2
`ease`	3	12	5	4	18	3.2
`ease-in`	3	12	5	4	18	3.2
`ease-in-out`	3	12	5	4	18	3.2
`ease-out`	3	12	5	4	18	3.2
`forwards`	3	12	5	4	18	3.2
`infinite`	3	12	5	4	18	3.2
`linear`	3	12	5	4	18	3.2
`none`	3	12	5	4	18	3.2
`normal`	3	12	5	4	18	3.2
`reverse`	3	12	5	4	18	3.2
`step-end`	3	12	5	4	18	3.2
`step-start`	3	12	5	4	18	3.2
Other
`css.types.time` The CSS data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties.	1	12	4	3.1	18	2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS

/* Animations (CSS) */
/* See MDN Web Docs for details */

Use cases

State transitions
Use Animations (CSS) to clarify UI changes such as opening, reordering, or page transitions.
Polished feedback
Add motion only where it reinforces direction, hierarchy, or system response.

Cautions

Motion features can quickly become distracting if they are applied too broadly.
Keep animation rules paired with sensible non-animated fallbacks.

Overview

Browser support

Syntax

Use cases

State transitions

Polished feedback

Cautions

Accessibility

Related links