CSS Animations and @keyframes

While transitions animate between exactly two states (a start and an end), CSS animations let you define multiple intermediate steps using the @keyframes rule, enabling far more complex, self-running motion — like a pulsing badge, a loading spinner, or a multi-stage entrance effect — without needing JavaScript or a triggering event like hover.

An animation has two parts: a @keyframes block that defines what changes at each stage of the animation as a percentage of its total duration, and a set of animation-* properties (or the animation shorthand) applied to the element that specify which keyframes to use and how to play them.

Why it matters

Loading spinners, pulsing notification badges and elements that fade in as a page appears are keyframe animations. Unlike a transition, they need no trigger and can loop for ever. Used sparingly they draw attention to what matters; overused they distract and can make some users unwell, so they come with a responsibility.

Defining @keyframes

A @keyframes rule is named and contains percentage-based stops describing the styles at each point in the animation's timeline: 0% is the start and 100% is the end, with any number of steps in between. You can also use the keywords from (equivalent to 0%) and to (equivalent to 100%) for simple two-stage animations.

The Animation Shorthand Properties

Once a @keyframes block exists, it's applied to an element via several properties, usually combined in the animation shorthand.

• animation-name — the name of the @keyframes rule to use.
• animation-duration — how long one full cycle takes, e.g. 2s.
• animation-timing-function — the easing curve, same options as transitions (ease, linear, ease-in-out, etc.).
• animation-iteration-count — how many times it repeats: a number, or infinite for a continuous loop.
• animation-fill-mode — controls what styles apply before/after the animation plays, e.g. forwards keeps the final keyframe's styles after it ends.

Combining It All

The shorthand packs these together in order: animation: pulse 2s ease-in-out infinite; defines the name, duration, timing function, and iteration count in a single declaration. Additional values like a delay or fill-mode can be appended to the same shorthand.

Examples

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.15); opacity: 0.8; }
  100% { transform: scale(1);   opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

The badge continuously grows slightly and fades a little at the halfway point of each 1.5-second cycle, then returns to its original size and opacity, repeating indefinitely.

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-heading {
  animation: fade-in-up 0.6s ease-out forwards;
}

The heading starts invisible and shifted 20px downward, then animates into full opacity and its natural position over 0.6 seconds, remaining in that final visible state afterward because of animation-fill-mode: forwards.

Exercise

Define an animation named pulse that scales an element from its normal size to 110%. Apply it to the button so that it runs for 1 second with an ease-in-out timing, repeats for ever, and plays forwards then backwards.

Expected result: the button grows and shrinks smoothly and continuously.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

/* TODO: @keyframes pulse, from scale(1) to scale(1.1) */

button {
  /* TODO: run pulse for 1s, ease-in-out, infinitely, alternating */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

button {
  animation: pulse 1s ease-in-out infinite alternate;
}

Quick quiz

Interview questions