What is @keyframes in animations?

CSSJunior~1 min read

@keyframes is a CSS rule that defines the animation's keyframes: a set of element states at different points in time. The animation then smoothly "plays" the transitions between these keyframes.

Format:

css

@keyframes animation-name {
  0%   { /* initial state */ }
  50%  { /* intermediate state */ }
  100% { /* final state */ }
}

After the animation is declared, it is attached to an element via the animation property:

css

.box {
  animation: animation-name 2s infinite;
}

The gist: @keyframes defines what happens at each stage of the animation, while animation defines how and when it plays.

Short Answer

Interview ready

Premium

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