CSSアニメーション ジェネレーター
CSSアニメーション（@keyframes）を直感的に作成。
12種類のプリセットとパラメータ調整機能、リアルタイムプレビュー対応。
アニメーション設定
CSS コード出力
CSSアニメーションジェネレーターについて
この「CSSアニメーションジェネレーター」は、CSSの @keyframes を用いたアニメーションの動きを視覚的に確認しながら、必要なCSSコードを自動生成できる無料ツールです。フェードイン、スライド、スケール、バウンスなど12種類のベースアニメーション（プリセット）を用意しています。
Duration（秒数）、Delay（遅延）、Easing（イージング）、繰り返し回数やFill Modeといったプロパティをスライダーやセレクトボックスで直感的に調整でき、プレビューエリアでリアルタイムに確認できます。
調整が完了したら、生成されたCSSコードをコピーして、ご自身のプロジェクトにそのまま貼り付けるだけで利用可能です。処理はすべてブラウザ内で完結しており、外部サーバーへの通信は発生しないため安全にお使いいただけます。
CSSアニメーションの作成手順
ベースとなる動きの選択
まずは「フェード」「スライド」などのタブを切り替え、作りたいアニメーションに近いプリセットを選択します。
各種パラメータの調整
再生時間（Duration）や遅延（Delay）、イージングの緩急をスライダーで変更し、右側のプレビューエリアで実際の動きを確認します。
CSSコードのコピー
動きが完成したら、出力エリアにある「コードをコピー」ボタンをクリックし、ご自身のCSSファイル等へ貼り付けます。
CSSアニメーション プロパティ解説
animation-duration(Duration)- アニメーション1回分の再生時間（完了するまでにかかる時間）を指定します。秒（s）またはミリ秒（ms）で指定します。
animation-timing-function(Easing)- アニメーションの進行速度のカーブ（緩急）を指定します。一定速度の「linear」、最初と最後が緩やかな「ease-in-out」などがあります。
animation-delay(Delay)- アニメーションが開始されるまでの待機時間（遅延）を指定します。
animation-iteration-count- アニメーションを繰り返す回数を指定します。「infinite」を指定すると無限にループします。
animation-direction- アニメーションの再生方向を指定します。逆再生の「reverse」や、奇数回は順方向、偶数回は逆方向となる「alternate」などがあります。
animation-fill-mode- アニメーションの実行前、および終了後の要素のスタイル（状態）をどのように維持するかを指定します。「forwards」にすると、アニメーション終了時のスタイルがそのまま維持されます。
よくある質問 (FAQ)
- Q.CSSアニメーションとtransitionの違いは？
transitionは状態変化（hover等）をトリガーに2つの状態間を補完します。animationはトリガーなしで自動再生でき、@keyframesで途中の状態を細かく定義できる点が大きな違いです。- Q.どのアニメーションがパフォーマンスに良いですか？
transform（translate, scale, rotate）とopacityのアニメーションはGPUアクセラレーションが効くため高速です。widthやheight、marginのアニメーションはブラウザの再レンダリング（リフロー）を発生させるため重くなります。- Q.prefers-reduced-motionとは？
- 激しいアニメーションに酔うユーザーのためのメディアクエリです。
@media (prefers-reduced-motion: reduce)を用いて、アニメーションを無効化・オフにする対応を行うことがアクセシビリティの観点で推奨されます。 - Q.animation-fill-modeのforwardsは必須ですか？
- フェードインなどの場合、
forwardsを指定しないとアニメーション終了時に元の状態（opacity: 0など）にパッと戻ってしまいます。最終フレームのスタイルを画面に保持したい場合は必須です。 - Q.データはサーバーに送信されますか？
- いいえ。すべての処理はお使いのブラウザ内（ローカル）で完結しており、外部へのデータ送信は一切ありません。
CSSアニメーションの活用シーン
ページ読み込み時のアニメーション
コンテンツがふわっと表示されるフェードインや、下からせり上がるスライドインを実装し、ページのファーストインプレッションを向上させます。
ボタンやCTAの強調表示
パルス（鼓動）やバウンス（跳ねる）などのアニメーションをコンバージョンボタンに適用し、ユーザーの視線を自然に誘導します。
スクロール連動アニメーション
Intersection Observer API と生成したCSSアニメーションクラスを組み合わせ、要素が画面内に入った瞬間に再生される演出を作ります。
ローディング・待機UI
データの取得中やフォーム送信中のフィードバックとして、無限に回転したり明滅したりするローディングアニメーションを実装します。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。