What is the difference between CSS transitions and animations?

CSS

The short answer

A transition animates a property from one value to another when something changes, such as a hover or a class toggle. It needs a trigger and only goes between two states. An animation uses @keyframes to define a full sequence of steps and can run on its own as soon as the element renders, repeat, and move through many intermediate values. Use a transition for simple state changes, and an animation for anything that loops or has more than two steps.

A transition

A transition watches one or more properties and smoothly interpolates them when their value changes:

.button {
  background: #4338ca;
  transition: background 200ms ease;
}
.button:hover {
  background: #6366f1;
}

Nothing happens until the trigger fires. On hover, the background moves from one color to the other over 200ms. Remove the hover and it transitions back. There is no concept of looping or intermediate steps.

An animation

An animation defines named keyframes and plays through them. It does not need a state change to start:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

This runs as soon as the element appears, passes through a midpoint, and repeats forever. A transition cannot express that midpoint or the loop.

How to choose

Use a transition whenUse an animation when
There is a clear trigger (hover, focus)It should start on its own
You move between two statesIt loops or repeats
One step is enoughYou need multiple keyframe steps

Interview Tip

A neat way to frame it: a transition is a reaction, an animation is a script. The transition reacts to a change you make elsewhere, while the animation plays a predefined sequence regardless of state. Both interpolate the same CSS properties, so the performance advice is identical: animate transform and opacity whenever you can.

Why interviewers ask this

This separates someone who reaches for the right tool from someone who forces every effect into one approach. Transitions keep simple hover and toggle effects short and readable, while animations handle loaders, attention cues, and multi step motion. Knowing when each fits, and that they share the same set of cheap to animate properties, shows practical CSS judgment.

Table of Contents