CSS Animation Properties

Master the complete set of CSS animation properties to create sophisticated, performant animations that bring your web projects to life.

CSS Animation Properties Overview

What are Animation Properties?

CSS animation properties control how animations behave, including their timing, direction, repetition, and more. These properties work together with @keyframes to create complex animations.

.element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-play-state: running;
}

Shorthand Syntax

The animation property is a shorthand for all animation properties (except animation-play-state).

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
.element {
  animation: slide-in 2s ease-in-out 0.5s infinite alternate both;
}

Note: Order matters! The first time value is always duration, the second is always delay.

Animation Properties Deep Dive

Animation Name

Specifies the name of the @keyframes animation

Animation Name: slide-in

Animation Duration

Sets how long an animation should take to complete one cycle

Duration: 3s

Duration: 0.5s

Animation Timing Function

Defines the speed curve of the animation

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier

Animation Delay

Specifies a delay before the animation starts

No delay
1s delay

Animation Iteration Count

Defines how many times an animation should play

Once
Twice
Infinite

Animation Direction

Specifies whether an animation should play forwards, backwards, or alternate

Normal
Reverse
Alternate
Alternate Reverse

Animation Fill Mode

Specifies how styles are applied before and after animation execution

None
Forwards
Backwards
Both

Animation Play State

Specifies whether the animation is running or paused

Running
Paused

Animation Shorthand

The shorthand property for all animation properties

Simple
Multiple

Animation Performance Tips

✓ Best Practices

  • • Use transform and opacity for smooth animations
  • • Set will-change for elements you plan to animate
  • • Keep animation durations under 500ms for UI feedback
  • • Use the appropriate timing function for each effect
  • • Test animations on target devices
  • • Consider using the prefers-reduced-motion media query

✗ Common Mistakes

  • • Animating properties that trigger layout changes
  • • Using infinite animations unnecessarily
  • • Not providing controls for motion-sensitive users
  • • Overusing complex animations that distract users
  • • Forgetting to set animation-fill-mode when needed
  • • Not testing animation performance on low-end devices

Browser Support & Compatibility

PropertyChromeFirefoxSafariEdge
animation43.016.09.012.0
@keyframes43.016.09.012.0
will-change36.036.09.179.0

Note: All modern browsers support CSS animations. For legacy browsers, consider using prefixes (-webkit-, -moz-, -ms-, -o-) or fallbacks.

Complete Interactive Demo

Explore all CSS animation properties in an interactive environment. This demo showcases each property with visual examples and allows you to experiment with different values.

Demo Features:

  • • Visual examples of each animation property
  • • Interactive controls to modify values
  • • Real-time preview of changes
  • • Copy code functionality
  • • Play/pause/reset controls
  • • Side-by-side comparisons
  • • Responsive design for all devices
  • • Detailed code examples

Opens in the HTML editor with full source code

< PreviousNext >