CSS アニメーションジェネレーター

CSS animation プロパティとは？

CSS animation プロパティは、JavaScript なしで要素をあるスタイルから別のスタイルへアニメーションできるショートハンドです。animation-name（使用するキーフレームルール）、animation-duration（1 サイクルの長さ）、animation-timing-function（加速度カーブ）、animation-delay、animation-iteration-count（繰り返し回数）、animation-direction、animation-fill-mode を組み合わせています。数行の CSS で、スピン、パルス、バウンス、フェード、スライドを作成でき、すべてブラウザ内で実行されます。

アニメーションが transform と opacity をアニメーションする場合、GPU アクセラレーションされるため、スムーズでパフォーマンスが良好です。JavaScript を必要とせず、簡単な CSS 変更で一時停止、反転、ループできるため、繰り返しの装飾的な動きに推奨されるアプローチです。

アニメーションプロパティの解説

CSS animation ショートハンドはいくつかのサブプロパティを受け入れます。それぞれを理解することで目的の動きを正確に構築できます:

このツールは最も重要な 4 つのプロパティを公開しています。完全なショートハンドには delay、direction、fill-mode、play-state も含まれており、生成されたコードをコピーした後に手動で追加できます。

キーフレームとタイミング関数

CSS アニメーションは @keyframes ルールによって駆動され、タイムライン上の様々なポイントでのスタイルを定義します。例えば @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } は要素を 1 回転させます。パーセンテージストップ（0%、50%、100%）を使えば、上に移動してから下に戻るバウンスなど、より複雑な多段階アニメーションを作成できます。

timing-function はアニメーションが各サイクル内でどのように進行するかを制御します。linear は一定速度。ease はゆっくり始まり、速くなり、ゆっくり終わります。ease-in はゆっくり始まり加速します。ease-out は速く始まり減速します。ease-in-out は両端がゆっくりです。自然な感じには ease または ease-in-out が通常最適で、ローディングスピナーには回転が安定して見える linear が好まれます。

CSS アニメーションを使う場面

CSS アニメーションは、複雑なシーケンスロジックを必要としない繰り返しの装飾的な動きに理想的です。一般的な用途には、継続的に回転するローディングスピナー、注目を引くパルスボタンやバッジ、遊び心のあるインタラクションのバウンスアイコン、微妙なトランジションの要素フェードイン・アウト、ビューにスライドインする通知やトーストがあります。ページ読み込み時のエントランスアニメーションにも使われ、要素が初期状態から最終位置へアニメーションします。

ユーザー入力に反応する、特定のイベントで開始する、または複数の要素を調整する必要があるアニメーションには、JavaScript 制御のトランジションや Web Animations API がより適している場合があります。しかし、自己実行型、ループ、または一回限りの装飾的な動きには、CSS アニメーションがよりシンプルで高性能、かつ JavaScript 不要です。

CSS アニメーションの生成方法

このツールを使えば視覚的にアニメーションをデザインできます: キーフレームプリセット（spin、pulse、bounce、fade、slide）を選び、スライダーで継続時間を設定し、ドロップダウンからタイミング関数を選び、繰り返し回数を選択します。プレビューがリアルタイムでアニメーションし、効果を確認でき、CSS コード（@keyframes ルールを含む）が自動生成されます。「CSS をコピー」をクリックしてコードを取得し、スタイルシートに貼り付けます。

すべてブラウザ内でローカルに実行されます — データはサーバーに送信されず、デザインの選択は完全にプライベートです。