키프레임은 특정 시점에 애니메이션이 어떻게 보여야 하는지 표시합니다. 웹 애니메이션에서는 시작과 끝의 모습을 각각 설정하고 브라우저가 그 사이의 움직임을 채웁니다.
공이 튀는 모습을 그린다고 생각해 보세요. 가장 높은 위치와 낮은 위치를 그리면 그 사이의 그림이 움직임을 만듭니다. CSS의 `@keyframes` 규칙은 중간 지점을 포함해 이러한 순간을 설명합니다. 키프레임은 실제 그림일 필요가 없습니다. 크기, 색, 위치 또는 다른 시각적 속성의 변화를 지정할 수 있습니다.