애니메이션의 시작과 끝뿐 아니라 중간 지점들(0%, 50%, 100%…)에서 값을 지정해 여러 단계를 하나의 애니메이션으로 엮는 CSS 문법.
디자인 아틀라스<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>.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)}
}transition은 두 상태 사이만 보간하지만 @keyframes는 원하는 만큼 정지 지점(스톱)을 두고 각 지점에서 여러 속성을 동시에 바꿀 수 있습니다. 요소에는 animation 축약 속성(이름, 지속시간, 이징, 지연, 반복 횟수, 방향, 채우기 모드)으로 연결합니다.
퍼센트 대신 from/to 키워드도 0%/100%와 같은 뜻입니다. 한 스톱에서 여러 속성(transform, background, border-radius 등)을 동시에 바꿀 수 있어서 "이동하며 회전하고 색이 바뀌는" 같은 복합 동작을 하나의 애니메이션으로 만들 수 있습니다.
상태가 둘뿐이면 transition으로 충분합니다. 세 단계 이상의 시퀀스나 자동 반복(infinite)이 필요할 때 keyframes를 씁니다.