キーフレームは、特定の時点でアニメーションがどう見えるかを示します。Webアニメーションでは、開始時と終了時の見た目を別々に設定できます。ブラウザーがその間の動きを補間します。

ボールの跳ね返りを描くとき、最上点と最下点を描き、その間の絵で動きを作ることを想像してください。CSSの`@keyframes`ルールは、途中の点も含めてこれらの時点を記述します。キーフレームは実際の絵でなくてもよく、サイズ、色、位置などの視覚的な変化を指定できます。