Animations (CSS) | Frontend Practical Guide

Widely available Supported across all major browsers. Safe to use in production.

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
CSS at-rule
`@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
`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
CSS property
`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
`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
`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
`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
`auto` `auto` value	115	115		18.4	115	18.4
`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
`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
`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
`infinite`	3	12	5	4	18	3.2
`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
`none`	3	12	5	4	18	3.2
`animation-play-state` The animation-play-state CSS property sets whether an animation is running or paused.	43	12	16	9	43	9
`paused`	3	12	5	4	18	3.2
`running`	3	12	5	4	18	3.2
`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
`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
CSS type
`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

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.ball {
  animation: bounce 0.8s ease-in-out infinite;
}

/* Rotation animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1.5s linear infinite;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

Live demo

Bounce

CSS Animations (@keyframes) Bounce demo.

PreviewFullscreen

Rotatespinner

CSS Animations (@keyframes) Rotatespinner demo.

PreviewFullscreen

palspulse

CSS Animations (@keyframes) palspulse demo.

PreviewFullscreen

Use cases

Using Animations (CSS)

The animation shorthand CSS property applies an animation between styles.

Cautions

May not be supported in older browsers.

Browser support

Syntax

Live demo

Bounce

Rotatespinner

palspulse

Use cases

Using Animations (CSS)

Cautions

Accessibility

Related links