CSSアニメーション生成器 — キーフレームアニメーションをコードなしで

CSSアニメーションはJavaScriptなしで複雑な動きの効果を実現できます。生成器でキーフレームアニメーションを視覚的に構築し、すぐ使える@keyframesコードを生成します。

キーフレームアニメーションの構造

@keyframes name { from { ... } to { ... } }は2状態の基本アニメーション。パーセンテージ（0%・50%・100%）で複数の中間状態を指定できます。animationプロパティで要素と@keyframesを紐付けます。

イージング関数

easeは標準（ゆっくり始まり加速し終わりにゆっくり）。linearは一定速度。ease-inは終わりに向けて減速。ease-outは最初から加速。cubic-bezier()でカスタムイージング曲線が作れます。

パフォーマンス

GPUアクセラレーションのためtransformとopacityのみをアニメーションさせましょう。width・height・margin・paddingのアニメーションはレイアウト再計算を発生させます。複雑なアニメーションにはwill-change: transformを使用してGPUを準備します。