CSS animation Property

What You’ll Learn

The animation property is a shorthand that applies CSS animations in one line. You define motion with @keyframes, then use animation to set name, duration, timing, and more.

Definition and Usage

The animation CSS property is a shorthand for animation-related longhand properties. Instead of writing animation-name, animation-duration, and several others separately, you can combine them into one declaration.

Animations always need two parts: first define the keyframe steps with @keyframes, then apply them with animation. This makes it easier to create loaders, entrances, hover effects, and other dynamic UI motion.

📝 Syntax

The animation shorthand accepts multiple values in a specific order:

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

Basic Example

@keyframes moveAndColor {
  from {
    background-color: red;
    transform: translateX(0);
  }
  to {
    background-color: blue;
    transform: translateX(200px);
  }
}

.animated-box {
  animation: moveAndColor 3s ease-in-out 1s infinite alternate;
}

Syntax Rules

• The first value is the @keyframes name, or none to disable animation.
• When a duration is included, it must come immediately after the name.
• Omitted values use their defaults: ease, 0s delay, 1 iteration, normal direction.
• You can use animation: fadeIn 1s; for a simple one-time entrance effect.
• Comma-separated lists apply multiple animations to the same element.

Default Value

The initial value of animation is equivalent to:

animation: none 0s ease 0s 1 normal none running;

This means no animation runs until you assign a keyframe name and a duration greater than zero.

💎 Property Values

Each part of the shorthand maps to a longhand animation property.

How @keyframes Works with animation

Every CSS animation needs two steps working together:

Shorthand vs Longhand

Both approaches produce the same result. The shorthand is faster to write; longhand properties are easier to override one at a time.

Examples Gallery

Try the animation shorthand with color and movement, simple fades, multiple animations, and longhand equivalents.

<style>
  @keyframes moveAndColor {
    from {
      background-color: red;
      transform: translateX(0);
    }
    to {
      background-color: blue;
      transform: translateX(200px);
    }
  }
  .animated-box {
    width: 100px;
    height: 100px;
    animation: moveAndColor 3s ease-in-out 1s infinite alternate;
  }
</style>

<div class="animated-box"></div>

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card {
  animation: fadeIn 0.8s ease-out forwards;
}

.badge {
  animation:
    fadeIn 0.5s ease-out forwards,
    pulse 1.2s ease-in-out 0.5s infinite;
}

/* Shorthand */
.spinner {
  animation: spin 1s linear infinite;
}

/* Longhand equivalent */
.spinner-longhand {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

💡 Best Practices