トランジションが2つの状態の間をアニメートする一方で、@keyframes アニメーションは、自動的に実行でき、ループでき、多くの中間状態を通過できるマルチステップシーケンスを定義します。
アニメーションの定義と適用
css
slide-in {
{ : (-); : ; }
{ : (); : ; }
}
{
: slide-in ease-out;
}
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-30px); } /* peak of the bounce */
100% { transform: translateY(0); }
}
パーセンテージを使用すると、1つのアニメーション内で複数のステージをコレオグラフできます — シンプルなトランジションでは不可能です。
.spinner {
animation: spin 1s linear infinite;
/* │ │ │ └── iteration-count (infinite = loop forever) */
/* │ │ └───────── timing function */
/* │ └────────────── duration */
/* └─────────────────── @keyframes name */
}
@keyframes spin { to { transform: rotate(360deg); } } /* classic loading spinner */
その他のプロパティ: animation-delay、animation-direction: alternate (ピンポン)、animation-fill-mode: forwards (最終状態を保持)、animation-play-state: paused。
/* ✅ GPU-composited, 60fps */
@keyframes good { to { transform: scale(1.1); opacity: 0.5; } }
/* ❌ animating width/height/top forces layout every frame → jank */
@keyframes bad { to { width: 300px; top: 50px; } }
キーフレームアニメーションはフレームごとに実行されるため、レイアウトをトリガーするプロパティをアニメートすることは、transform/opacity をアニメートすることより遥かにコストがかかります。
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; } /* honor users sensitive to motion */
}
キーフレームアニメーションは、ローダー、注意喚起、入場エフェクト、およびトランジションでは表現できないループエフェクト (マルチステップ、自動実行、無限) を駆動します。
ショートハンドを知り、滑らかさのために transform/opacity に固執し、prefers-reduced-motion を尊重することで、パフォーマンスとアクセシビリティを保つ豊かなモーションを構築できます。