CSS 'animation' Property Explained

The CSS 'animation' property is a shorthand for animating webpage elements. It enables you to define the duration, timing function, delay, iteration count, direction, fill mode, and play state of an animation in a single declaration. This property combines the animation-related properties covered below (name, duration, timing function, delay, iteration count, direction, fill mode and play state; MDN also lists animation-timeline as part of the shorthand) into one concise statement, making it easier to create complex animations.

CSS 'animation' Property Examples

See the Pen CSS 'animation' Property by Webzstore (@webzstore) on CodePen.

The 'animation' property streamlines the process of defining animations in CSS, offering a flexible and powerful tool for adding dynamic visual effects to web pages. Combining multiple aspects of animation into a single property simplifies the syntax. It enhances readability, making it easier to create and manage CSS animations.

Browser Support For 'animation' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation for the full compatibility details, including mobile browsers.

CSS Syntax of the 'animation' Property

In the template below, the words are the components you can combine in one declaration, separated by spaces. They are not alternatives (the "|" pipe is not used here). Each component is optional, but visible motion needs an animation name that matches an @keyframes rule and a duration longer than 0s (a 0s duration shows no motion, though it still applies fill-mode and fires animation events). Following MDN's convention, put the animation name last to avoid ambiguity with keyword values.

/* Template: components are combined, not chosen between */
animation: duration timing-function delay iteration-count direction fill-mode play-state name;

/* Working example */
.box {
  animation: slide 2s ease 1s 3 alternate both;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

In the example, slide is the name of the @keyframes rule, 2s is the duration, ease is the timing function, 1s is the delay, 3 is the iteration count, alternate is the direction, and both is the fill mode. When two time values appear, the first is always the duration and the second is the delay. Any component you leave out takes its initial value.

Usage of the 'animation' Property

Use the 'animation' property when you want to add movement or transitions to an element, creating more engaging and dynamic user interfaces. It can be used to draw attention to specific parts of a page, indicate loading states, provide feedback on user interactions, or add visual interest to your site.

Property Values of the 'animation' Property

• Name: Specifies the name of the keyframe you want to bind to the selector.
• Duration: The length of time it takes for the animation to complete one cycle.
• Timing-function: Controls the pacing of the animation (e.g., linear, ease-in, ease-out, ease-in-out).
• Delay: The waiting time before the animation starts.
• Iteration-count: The number of times the animation should repeat; infinite for endless repetition.
• Direction: Specifies whether the animation should play forwards, backward, or alternate between the two.
• Fill-mode: Defines how a CSS animation should apply styles to its target before and after its execution.
• Play-state: Determines whether the animation is running or paused.