CSS animation Property

Description

The CSS animation property is a powerful shorthand that allows you to apply complex, timeline-based animations to elements using pure CSS. It works by linking an element to a set of keyframes and controlling how that animation behaves over time. Instead of relying on JavaScript for motion effects, CSS animations let the browser handle transitions smoothly and efficiently, resulting in better performance and cleaner code. Animations can run automatically, repeat infinitely, pause, reverse direction, or even maintain their final visual state after completion.

At its core, the animation property combines several individual animation-related properties into a single declaration. These include the animation’s name (which connects it to a @keyframes rule), its duration, timing behavior, delay before starting, repetition count, direction, fill behavior, and play state. For example, duration defines how long an animation takes to complete, while timing functions control the pacing of movement - whether it’s linear, eased, or custom. These underlying controls are also available individually, such as animation-duration and animation-timing-function, allowing for more granular control when needed.

One of the most powerful aspects of CSS animations is how naturally they integrate with other CSS features. Animations can affect visual properties such as position, opacity, transforms, and colors without disrupting layout flow. When paired with properties like transform or opacity, animations can appear smooth and hardware-accelerated, making them ideal for modern UI effects such as loaders, hover feedback, attention cues, and micro-interactions. Unlike transitions, animations don’t require a state change to run - they can start automatically and loop continuously if desired.

Finally, the animation property helps keep stylesheets clean and maintainable by grouping multiple animation controls into a single line. This not only improves readability but also makes it easier to reuse animations across elements or projects. When combined with well-structured keyframes and thoughtful timing, CSS animations can significantly enhance user experience without sacrificing performance or accessibility.

Definition

Initial value: see individual properties
Applies to: All elements, ::before and ::after pseudo elements
Inherited: See individual properties
Computed value: See individual properties
Animatable: No
JavaScript syntax: object.style.animation

Interactive Demo

animation: rotate 2s linear 0s infinite alternate;

animation: rotate 2s linear 4s 3 reverse;

animation: rotate 1s linear 500ms infinite alternate;

animation: rotate 2s ease-in-out 2s 2 normal;

Syntax

animation: <single-animation> [ ',' <single-animation> ]*

Values

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<animation-name>See animation-name CSS property for values.
<animation-duration>See animation-duration CSS property for values.
<animation-timing-function>See animation-timing-function CSS property for values.
<animation-delay>See animation-delay CSS property for values.
<animation-iteration-count>See animation-iteration-count CSS property for values.
<animation-direction>See animation-direction CSS property for values.
<animation-fill-mode>See animation-fill-mode CSS property for values.
<animation-play-state>See animation-play-state CSS property for values.

Example

HTML

<div class='wrapper'>

  <div class='stage'>

    <div class='ball' role='img' aria-label='Bouncing ball'></div>

  </div>

  <p class='caption'>CSS Animation  -  bounce</p>

</div>

CSS

/* Reset and layout */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4ff, #ffffff);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #333;
}

/* Scene */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
}

.stage {
  width: 220px;
  height: 160px;
  position: relative;
  background: linear-gradient(180deg, #e9eefc, #d9e4ff);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.08) inset;
  overflow: hidden;
}

/* Ball */
.ball {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 30% 30%, #fff8, #ff7b7b 40%, #ff4b4b 100%);
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 24px);
  top: 16px;
  box-shadow: 0 8px 12px rgba(0,0,0,0.18);
  transform-origin: center;
  animation: bounce 900ms cubic-bezier(.24,.88,.42,1) infinite;
}

/* Caption */
.caption {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

/* Keyframes */
@keyframes bounce {
  0% {
    transform: translateY(0) scaleY(1);
  }
  40% {
    transform: translateY(104px) scaleY(0.98);
  }
  55% {
    transform: translateY(88px) scaleY(1.02);
  }
  70% {
    transform: translateY(104px) scaleY(0.99);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS animation property. Hover over a browser icon to see the version that first introduced support for this CSS property.