CSS Animations

CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.

Reference

CSS Properties

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

CSS At-rules

• @keyframes

Guides

Detecting CSS animation support

Describes a technique for detecting if a browser supports CSS animations.

Using CSS animations

Step-by-step tutorial about how to create animations using CSS. This article describes each relevant CSS property and at-rule and explains how they interact with each other.

CSS animations tips and tricks

Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying an animation which has already run through to completion, which the API doesn't support inherently.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Related to CSS Animations, CSS Transitions can trigger animations based on user actions.