Keyframe

You might say

Make the logo rotate continuously. AI says to use keyframes?

The state points you specify in an animation; the browser interpolates animatable properties between specified pointsCSS @keyframes lets you specify styles at points such as 0%, 50%, and 100%. The browser calculates values between points for interpolable properties; looping requires a separate animation-iteration-count setting such as infinite, because keyframes do not loop by themselves.

Know first

Transition

Keyframe@keyframes

Which state points the keyframes specify

Looping

animation.css

@keyframes spin {
  0%   { rotate: 0deg }
  50%  { rotate: 180deg }
  100% { rotate: 360deg }
}
.spin { animation: spin 2s; animation-iteration-count: infinite }

0% · 0 deg50% · 180 deg100% · 360 deg

You specify the keyframes; the browser interpolates eligible properties, while other properties may switch discretely.

Keyframes versus transitions

A transition has only two states: From initial to target state, triggered by hover or click; it plays once and stops.

Keyframes can specify many states: Specify points at 0%, 50%, and 100%; set animation-iteration-count separately if it should loop.

Read the code for state points: Percentages inside @keyframes are the specified points; the browser interpolates between them for animatable properties, while other properties may switch discretely.

Quick checkChoose the best answer

A loading icon should rotate in an infinite loop. Which approach fits better?

Swap many images rapidly to simulate rotationUse keyframes: specify 0% and 100% states and set infinite loopingUse a transition; it will keep rotating when the page refreshes

You can say this to an AI Agent

Make the loading icon rotate in a loop: use @keyframes for its states and set animation-iteration-count: infinite. Also respect the system's reduced-motion preference; confirm the icon's movement changes when that setting is on.

Learn next

1Animation→2Transition→3Easing→4Prefers Reduced Motion→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website