Keyframe

You might say

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

The state points you specify in an animation; the system fills in everything in betweenWhen creating spinning icons or pulsing buttons, keyframes let you specify styles at milestones like 0%, 50%, and 100%, and the browser fills in the stages in between. Unlike basic transitions that only handle start-and-end states, keyframes define multiple steps, making them ideal for looping or multi-phase animations.

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 infinite }

0% · 0 50% · 180 100% · 360

Bolded percentages are the state points you specify; unwritten positions are filled in automatically.

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 have many states and loop: Specify multiple state points at 0%, 50%, 100% and set infinite looping or a repeat count.

Read the code for state points: The percentages inside @keyframes are the author's specified state points; unspecified positions are filled in by the system.

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 an infinite loop: use @keyframes to specify the 0% to 100% rotation states and set infinite looping. Afterward, confirm it keeps rotating in the page and stops when the system's reduce motion 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