The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.

Animations in action

To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.

This sample animation uses animation-iteration-count to make the flakes fall repeatedly, animation-direction to make the cloud move back and forth, animation-fill-mode to raise the snow level in response to the cloud movement, and animation-play-state to pause the animation.

Click "Play" in the example above to see or edit the code for the animation in the MDN Playground.

Reference

Properties

• animation shorthand
• animation-composition
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

The CSS animations module level 2 also introduces the animation-trigger, animation-trigger-exit-range, animation-trigger-exit-range-end, animation-trigger-exit-range-start, animation-trigger-range, animation-trigger-range-end, animation-trigger-range-start, animation-trigger-timeline, and animation-trigger-type properties. Currently, no browsers support these features.

At-rules

• @keyframes

Events

All animations, even those with 0 seconds duration, throw animation events.

• animationstart
• animationend
• animationcancel
• animationiteration

Interfaces

• Web Animations API
• AnimationEvent
• CSSAnimation
• CSSKeyframeRule
• CSSKeyframesRule

Guides

Using CSS animations

Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.

Using the Web Animations API

Common animation requirements that can be solved with a few lines of JavaScript.

Related concepts

• will-change CSS property
• <easing-function> data type
• prefers-reduced-motion media query
• Bezier curve glossary term

Specifications

See also

• CSS scroll-driven animations module.
• Properties in the transitions CSS module to trigger animations based on user actions.
• The interpolate-size property and calc-size() function for enabling animations to and from intrinsic size values.
• The <canvas> HTML element along with canvas API and WebGL API to draw graphics and animations.
• The SVGAnimationElement interface for all the animation-related element interfaces, including SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement, and SVGAnimateTransformElement.