Design Atlas
한국어
↝ Motion

Keyframes

키프레임

The CSS syntax for defining not just a start and end but intermediate stops (0%, 50%, 100%…) and chaining them into one animation.

Also known as: @keyframesCSS keyframe animation
···
html
<div class="track">
  <span class="stop" style="left:0%"></span>
  <span class="stop" style="left:30%"></span>
  <span class="stop" style="left:62%"></span>
  <span class="stop" style="left:90%"></span>
  <div class="box"></div>
</div>
css
.track{position:relative;width:min(80%,420px);height:4px;background:var(--line);border-radius:2px}
.stop{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--muted)}
.box{position:absolute;top:50%;left:0;width:32px;height:32px;margin-top:-16px;background:var(--accent);
  animation:move 3.2s ease-in-out infinite}
@keyframes move{
  0%{left:0%;transform:translateY(-16px) rotate(0deg);border-radius:8px;background:var(--accent)}
  30%{left:30%;transform:translateY(-38px) rotate(90deg);border-radius:50%;background:var(--accent-2)}
  62%{left:62%;transform:translateY(4px) rotate(180deg);border-radius:8px;background:var(--accent-3)}
  90%{left:90%;transform:translateY(-16px) rotate(360deg);border-radius:8px;background:var(--accent)}
  100%{left:90%;transform:translateY(-16px) rotate(360deg);border-radius:8px;background:var(--accent)}
}

A transition only interpolates between two states, but @keyframes lets you place as many stops as you want and change several properties at once at each stop. You wire it to an element with the animation shorthand (name, duration, easing, delay, iteration count, direction, fill mode).

from/to are just aliases for 0%/100%. Because one stop can change several properties together (transform, background, border-radius…), a single animation can carry a compound move — travel, rotate and recolor all at once.

When to use

If there are only two states, transition is enough. Reach for keyframes when you need three or more steps in sequence, or automatic looping.