CSS アニメーション ジェネレーター プリセット エフェクトとカスタマイズ可能なタイミングを持つ CSS キーフレーム アニメーションを作成します。

CSS アニメーションは、@keyframes ルールを使用した animation ショートハンド プロパティで構成されます。animation プロパティには、次のものが含まれます: animation-name (@keyframes ルールへの参照)、animation-duration、animation-timing-function (ease、linear、ease-in、ease-out、ease-in-out、またはカスタム cubic-bezier)、animation-delay、animation-iteration-count (数値または無限大)、animation-direction (normal、reverse、alternate、alternate-reverse)、animation-fill-mode (none、forwards、backwards、both)、および animation-play-state (running、paused)。@keyframes ルールでは、パーセント (0% から 100%) または from/to キーワードを使用して、アニメーションの段階を定義します。パフォーマンスのため、可能な限り transform および opacity プロパティのみをアニメーション化することをお勧めします。これらは GPU で高速化できます。その他のプロパティ (width、height、margin、padding など) はレイアウトの再計算をトリガーします。will-change プロパティを使用して、ブラウザーに予定されているアニメーションについてヒントを与えることができます。