CSSアニメーションジェネレーターとは？
CSSキーフレームアニメーションを視覚的に作成できます。コードを手書きする必要はありません。キーフレームを設定し、タイミング関数を選び、長さと遅延を調整して、CSSコードをそのままプロジェクトにコピーしましょう。ボタン、ローダー、ホバーエフェクト、ページ遷移に向いています。
フェード、スライド、ズーム、回転、バウンス、強調、退場、ローダーなどに分類された40種類以上の既製アニメーションから選ぶか、ゼロから自分で組み立てられます。各キーフレームでは不透明度、スケール、回転、translate X・Y、スキュー X・Y、ぼかし、角丸、ボックスシャドウ、背景色を細かく設定できます。すでに @keyframes ブロックがあれば、インポートダイアログに貼り付けるだけでビジュアルエディタが各ステップを再現します。プレビューを一時停止して赤いスクラバーをドラッグすれば、途中のどのフレームでも確認できます。出力は素の @keyframes CSS なので、好きなスタイルシートにそのまま貼り付けられます。
使い方
- アニメーションプリセット（フェード、スライド、バウンス、回転）を選択するか、タイムラインにキーフレームを追加してゼロから作成します。
- 各キーフレームのプロパティ（transform、opacity、color、scale）を調整し、イージングカーブ、デュレーション、繰り返し回数を細かく設定します。
- アニメーションをリアルタイムでプレビューし、生成された CSS @keyframes コードをコピーするか、.css ファイルとしてダウンロードします。
使用するタイミング
- ヒーロー、モーダル、カードなどにページ読み込み時の入場アニメーションを付けたいとき。
- ホバー時のわずかなスケール、フォームエラー時のシェイクなど、ボタンのマイクロインタラクションを設計するとき。
- ローディングスピナーやスケルトン状態を、フレームワークに組み込む前にプロトタイプするとき。
結果
フロントエンド開発者がポートフォリオページのカードにスムーズな登場アニメーションを必要としています。20px下からフェードインする0.6秒のease-outアニメーションを設定し、CSSをコピーして各カードに時間差をつけて適用します。
よくある質問
- CSS のアニメーションとトランジションは何が違うの?
- transition は hover、focus、クラス変更などのトリガーで状態 A から状態 B に一度だけ遷移します。animation は @keyframes ルールに沿って好きなだけ中間ステップを定義でき、ループも可能で、ユーザー操作なしにページ読み込みで自動で動き出します。
- アニメーションが一度再生されて消えてしまうのはなぜ?
- アニメーションが終わると、要素は元のスタイルに戻ります。animation-fill-mode を forwards にすると最後のキーフレームの値が残り、both にすると遅延中も最初のキーフレームが適用されます。
- 自然に感じさせるイージングはどれ?
- 入場には ease-out が向いていて、終わりに減速して動きが落ち着いて見えます。退場には逆向きの ease-in。cubic-bezier(0.34, 1.56, 0.64, 1) はわずかにオーバーシュートして、はしゃぎすぎずに少し遊び心が出ます。
- このアニメーションは古いブラウザでも動く?
- @keyframes は 2013 年以降にリリースされた全ブラウザで、ベンダープレフィックスなしでサポートされています。IE 10 以下を対象にする場合は -webkit- プレフィックスが必要ですが、今は対象ユーザーが少なく、わざわざ CSS を増やす価値はあまりありません。
- アニメーションを永久にループさせるには?
- iteration-count を infinite にしてください。direction: alternate と組み合わせれば、サイクルごとに逆再生になり、pulse や shake のような効果に最適な滑らかな行き来になります。冒頭への急なジャンプを避けられます。