Skip to main content

What are "states" in CSS animations?

CSSJunior~1 min read
Suggest an edit

In the context of animations, states mean fixed sets of CSS properties at specific moments in time, between which the browser creates a smooth transition. These states are defined in @keyframes via keyframes (from, to, or percentages: 0%, 50%, 100%, etc.).

Example with states

css
@keyframes move { 0% { transform: translateX(0); } /* state #1 */ 50% { transform: translateX(100px); } /* state #2 */ 100% { transform: translateX(0); } /* state #3 */ }

Here the animation goes through three states, and the browser fills in the smoothness between them on its own.

Important:

  • states = the animation's keyframes
  • each state corresponds to its own set of styles
  • animation is not the property itself, it's movement between states over time

In short: a state in a CSS animation is a point (keyframe) with specific styles, between which smooth interpolation happens.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit