CSS Animation

Introduction

CSS animations run named @keyframes over time. A keyframe animation can have multiple steps, repeat, pause, reverse, and run without waiting for a hover or class change.

Use animations for loaders, progress indicators, attention cues, entrance effects, and motion sequences that need more than a simple state change.

Transition vs Animation

A transition animates a change between two CSS states. An animation runs a named @keyframes sequence.

Animation Properties

Animations have several properties that control what runs, how long it runs, how it moves, and what happens before and after it runs.

Creating Animations with Keyframes

The @keyframes rule defines the animation sequence. Use from and to for simple start/end animations, or percentages for multi-step animations.

from is the same as 0%. to is the same as 100%.

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Applying an Animation

Use the animation shorthand to attach a keyframe sequence to an element.

A common shorthand pattern is animation: name duration timing-function delay iteration-count direction fill-mode.

.fade-in {
  animation: fadeIn 600ms ease-out both;
}

Individual Animation Properties

Writing the properties separately can make an animation easier to read while you are learning.

.fade-in {
  animation-name: fadeIn;
  animation-duration: 600ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

Animation Fill Mode

animation-fill-mode controls whether the animated styles apply before the animation starts, after it ends, both, or neither.

both is useful for entrance animations because the element can begin in the first keyframe state and stay in the final keyframe state.

Repeating Animations

animation-iteration-count controls how many times an animation runs. Use infinite only when repeated motion has a clear purpose, such as a loading spinner.

.spinner {
  animation: spin 800ms linear infinite;
}

Pausing Animations

animation-play-state can pause and resume an animation. This is useful for interactive demos, media-like controls, or pausing decorative motion on hover.

.marquee {
  animation: slide 12s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

Good Properties to Animate

Like transitions, animations are usually smoother when they use properties that do not force layout recalculation.

Example: One-time Fade In

A fade-in animation is useful when content enters the page or appears after loading.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 600ms ease-out both;
}

Example: Pulse Attention Cue

A pulse can draw attention, but it should stop after a few cycles unless it communicates an ongoing status.

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.notice {
  animation: pulse 700ms ease-in-out 3;
}

Example: Loading Spinner

A spinner is one of the clearest uses for an infinite animation because it communicates ongoing loading.

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  inline-size: 2rem;
  block-size: 2rem;
  border: 4px solid #ddd;
  border-top-color: #2f9e44;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

Example: Progress Bar

A progress bar can animate with transform: scaleX() from left to right. This avoids animating width.

@keyframes progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.progress-bar {
  transform-origin: left;
  animation: progress 2s ease forwards;
}

Example: Skeleton Shimmer

A skeleton shimmer can suggest loading content, but avoid making it too bright, fast, or distracting.

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.skeleton::after {
  animation: shimmer 1.2s linear infinite;
}

Triggering Animations with JavaScript

JavaScript can trigger CSS animations by adding or removing a class. This keeps the animation definition in CSS and the interaction logic in JavaScript.

.animated-box.is-animating {
  animation: pulse 700ms ease-in-out;
}

const button = document.querySelector('.animation-button');
const box = document.querySelector('.animated-box');

button.addEventListener('click', () => {
  box.classList.remove('is-animating');

  requestAnimationFrame(() => {
    box.classList.add('is-animating');
  });
});

Accessibility and Motion Safety

• Avoid constant motion near long reading content.
• Do not make important information depend only on animation.
• Avoid flashing, flickering, or rapid high-contrast changes.
• Use prefers-reduced-motion to reduce or remove non-essential animations.
• Make infinite animations purposeful, such as showing loading or ongoing activity.

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .notice,
  .spinner,
  .skeleton::after {
    animation: none;
  }
}

Common Mistakes