CSSキーフレームアニメーション作成

CSSキーフレームアニメーションを視覚的に作成できる生成ツールです。コードを1行も書かずに、実際のサイトで使える@keyframesのCSSを作成し、プレビューで確認して書き出せます。

最終更新日: 2026 年 9 月 23 日

3 つのパネルのインターフェイスを通じてリアルタイムでアニメーションをデザインします。左側で設定を調整し、中央でキーフレームをスカルプトし、右側で再生を観察します。

機能:

• タイムライン エディタ: クリックしてキーフレーム停止を追加し、ドットをドラッグして任意のパーセントで位置を変更します。

• プロパティ エディタ: 不透明度、変換 (移動、回転、拡大縮小、傾斜)、フィルタ、色、サイズなどをキーフレームごとに制御します。

• ライブ プレビュー: ボックス、円、またはテキスト図形でアニメーションを再生します。フレームごとにスクラブします

• コード出力: 完全モードまたはキーフレームのみモード、手書きまたは短縮構文でクリーンな @keyframes CSS を生成します。

• 出発点として、入口、注意、継続、出口のカテゴリにわたる 12 の組み込みプリセット

イージング オプションには、標準カーブ、スプリング、バウンス、ステップ タイミングが含まれており、それぞれライブ カーブ ダイアグラムで視覚化されます。

CSS キーフレーム アニメーション ジェネレーターとは何ですか?

CSS キーフレーム アニメーション ジェネレーターは、視覚的なタイムラインを動作する @keyframes コードに変換するブラウザベースのツールです。

ストップのパーセンテージやアニメーションのプロパティを手で入力する代わりに、スライダーをドラッグし、イージング カーブを選択し、モーションがライブで発生するのを観察します。

このツールの全体的な仕事は、モーションの要求と完成したスタイルシート ルールの出荷との間の構文の推測を取り除くことです。

これは他の単一目的ジェネレーター ツールと同じファミリーに属しており、一般的なモーションではなくスピナー専用に構築された CSS ローダー ジェネレーター と精神的に似ています。

ほとんどのキーフレーム ジェネレーターは、適切に実行する必要があるジョブの短いリストを共有しています。

• タイムラインをパーセンテージベースのキーフレーム停止に変換する
• 一般的なアニメーション化可能なプロパティ、変換、不透明度、色を公開します。
• エクスポートする前にモーションをリアルタイムでプレビューする
• コピー＆ペースト可能な CSS、SCSS、または JS 構文を出力

たとえば、Animista はまさにこのワークフローを公開しています。カテゴリを選択し、いくつかのスライダーを操作して、CSS をコピーします。

ジェネレーターは内部で標準の CSS のみを記述するため、CSS (EN) 自体に慣れることが役立ちます。

新しい構文を発明しているわけではありません。ほとんどの人が手で入力するよりも早く、部品を組み立てるだけです。

ジェネレーターはどのような出力形式とエクスポート オプションを提供しますか?

ほとんどのジェネレーターはデフォルトでプレーンな CSS を返し、スタイルシートに直接貼り付けることができます。

いくつかはさらに進んで、SCSS 出力、または React または Vue のインライン スタイル プロップ用に整形された JavaScript オブジェクトを提供します。

一般的なエクスポート パス:

• クリップボードにコピー、1 回限りのアニメーションの最速のオプション
• スタンドアロンの .css ファイルとしてダウンロード
• CodePen に直接プッシュして共有したり、さらに調整したりできます

クリップボード オプションは、ほとんどの人が利用するものです。ファイルのダウンロードが実際に役立つのは、複数のアニメーションを一度に生成し、それらをまとめてバンドルしたい場合のみです。

これは、完成したサンプルを最初に参照することに代わるものではありません。 CSS アニメーション (EN) デモのページでは、多くの場合、ジェネレーターのステップを完全にスキップして、求めている正確な効果が表示されます。

エクスポートされたコードにはまだホームが必要です。通常は、生成されたブロックを他のルールの後に貼り付け、移動する要素の短縮プロパティからアニメーション名を参照します。

早めにフラグを立てる価値があることの 1 つは、生成されたクラス名は「fadeInUp1」や「spin2」などの汎用的なものであることが多いということです。スタイルシート内の既存のものと衝突する前に、名前を変更してください。

CSS キーフレーム アニメーション ジェネレーターはどのように機能しますか?

ジェネレーターは、作成したタイムラインを実際の@keyframes ルールに変換し、各ストップをブロック内のパーセンテージに変換します。

スライダーとカラー ピッカーの下には、手動で記述された CSS キーフレーム (EN)と同じ構文を使用して、各ストップのキーフレーム セレクターを記述するだけです。

キーフレームのパーセンテージストップ

すべてのアニメーションは 0% から 100% まで実行され、ジェネレーターを使用すると、2 つの間の任意の場所に追加の停止をドロップできます。

典型的な 3 ストップのバウンスは次のようになります。

0% から 100% に真っ直ぐジャンプするのではなく、50% でストップを追加することで、フラットな動きを実際に弾んでいるような動きに変えることができます。

タイミングパラメータ

キーフレームの停止とともに、ジェネレーターはアニメーションの短縮プロパティの数値側を公開します。

• 期間: 1 サイクルにかかる時間。通常は秒単位で設定されます。
• 遅延: ブラウザが開始するまでの待ち時間
• 反復回数: サイクルが繰り返される回数、またはループの場合は無限です。
• 方向: 順方向に再生するか、逆方向に再生するか、各サイクルを交互に再生するか

多くの生成ツールは、再生時間の初期値を0.5秒から2秒程度に設定しています。実際のUIでよく使われる動きの大半を、この範囲で表現できるためです。

不動産の報道はタイミングと同じくらい重要です。

ジェネレーターは、どちらも GPU アクセラレーションを維持する変換と不透明度で最も強力ですが、幅や上部などのレイアウトをトリガーするプロパティでは弱くなります。

合成されていない、ジャンクが発生しやすいアニメーションは依然としてモバイル ページの 40%、デスクトップ ページの 44% に表示されています (Annnimate、2026)。そのほとんどは、そもそも間違ったプロパティをアニメーション化することに起因しています。

重いアニメーションが開始される前に、変更のヒントを追加すると効果的です。使いすぎるとメモリを消費するだけで、何のメリットもありません。

一部のツールでは、SVG 要素を直接ターゲットにすることもできます。これと同じ領域は、変換の代わりにストローク ダッシュ オフセットまたはパス データを使用して、CSS で SVG をアニメーション化する (EN)方法に関するガイドでカバーされています。

Chrome DevToolsとFirefoxのAnimation Inspectorでは、書き出したアニメーションを後から1フレームずつ確認できます。ライブプレビューだけでは見落とすイージングの誤りを発見できます。

CSS アニメーション ジェネレーターはどのようなイージング関数をサポートしていますか?

すべてのジェネレーターには、linear、ease、ease-in、ease-out、ease-in out という標準のタイミング キーワードが付属しています。

リニアは機械的で均一な感じがします。イーズインアウトは、物理的なオブジェクトが実際に加速および減速する様子を模倣しているため、自然に感じられます。

ほとんどのツールはプリセット以外にも以下を公開します。

• グラフ上で 2 つの制御点をドラッグするカスタム 3 次ベジェ曲線エディター
• ステップ関数、フレームごとまたはスプライト スタイルのモーション用
• よりデザイン指向のツールにある名前付きのバネのようなプリセット

ベジェ曲線を目でドラッグするのは面倒です。 Lea Verou の cubic-bezier.com は、ジェネレーターの外側の曲線を調べるための参照ツールとして引き続き使用されます。

イージングカーブは見た目以上に変化します。ドロップダウン メニューで急なイーズインを行うと、200 ミリ秒のアニメーションが遅く感じることがありますが、600 ミリ秒のヒーロー アニメーションの同じカーブは意図的であるように感じられます。

コードが技術的に正しい場合でも、生成されたアニメーションが「違和感がある」と感じられる最も一般的な理由の 1 つは、この点を間違えることです。

ブラウザの互換性は生成された CSS アニメーションにどのような影響を与えますか?

最新のブラウザは、ベンダー プレフィックスなしで標準の @keyframes アニメーションを処理するため、生成されたコードのほとんどはそのままで機能します。

CSS アニメーションの互換性スコアは、現在のデスクトップおよびモバイル ブラウザ間で 100 点中 97 点 であり (LambdaTest、2025 年)、現実世界のトラフィックの大部分をカバーしています。

-webkit- のようなプレフィックスは、現時点では、少数の古い Safari および Android ブラウザ バージョン、または完全なブラウザ間の互換性 (EN)を目指してまだ動作しているいくつかの新しい実験的プロパティでのみ重要です。

ビルド ステップを実行しているチームは通常、構成したブラウザー リストに基づいて、Autoprefixer によってこれを自動的に処理させます。

互換性が依然として人々をつまずかせる場合:

• -webkit- アニメーション プロパティを必要とする非常に古い Android ブラウザ バージョン
• Safari は、まったく新しいアニメーション関連プロパティに関して Chrome や Firefox に後れを取っています
• ジェネレーターが出力をメディア クエリにラップしないため、モーション処理が軽減されます。

最後の点については、同意する価値があります。ユーザーのモーション設定を尊重するのは手動の手順であり、エクスポート ボタンが自動的に行うことではありません。

どの CSS キーフレーム アニメーション ジェネレーターを使用する必要がありますか?

適切な選択は、ビジュアル ビルダーが必要か、未加工のタイムライン エディターが必要か、または設定する必要のない既製のライブラリが必要かによって異なります。

開発者の Ana Travas によって構築されたアニミスタは、視覚的な素早い調整を重視しています。入り口、出口、注目を集める人などのカテゴリーを参照し、適切なものが見つかるまでスライダーを調整します。

Keyframes.app は、プリセット ギャラリーよりもタイムライン ツールに近い、作業中に生の停止パーセンテージを確認したい人に適しています。

Animate.css はエディターを完全にスキップします。要素にクラス名を追加すると、 数十の事前定義された効果のいずれかを取得できます。キーフレームの書き込みは不要です。

3 つのいずれも使用料がかからないため、決め手となるのは実際のワークフローです。オンザフライでデザインしている場合はビジュアル ビルダーを選択し、必要な効果がすでに正確にわかっている場合はライブラリを選択します。

CSS キーフレーム ジェネレーター vs ハンドコーディング vs JavaScript アニメーション ライブラリ: どちらが勝ちますか?

ジェネレーターは、シンプルで自己完結型のモーションの速度を重視します。制御に関してはハンドコーディングが優先され、アニメーションが何かに反応する必要がある場合には JavaScript ライブラリが優先されます。

ジェネレーターで構築された CSS:

• フェード、バウンス、ホバーなどの一般的なパターンでは高速です
• transformやopacityのアニメーションはコンポジタースレッドで処理されるため、メインスレッドの負荷を抑えられます。
• 複数の要素にわたるシーケンスが必要な場合は制限されます

手書きの CSS:

• すべてのプロパティとストップを完全に制御
• サードパーティツールのエクスポートの癖に依存しない
• 特に複雑なマルチストップ タイムラインの場合、最初から作成すると時間がかかります。

JavaScript アニメーション ライブラリ:

• シーケンス、スクロール トリガー、中断を適切に処理します。
• 純粋な CSS アプローチでは実現できないバンドルの重みを追加する
• すでにフレームワークをロードしている JavaScript を多用するインターフェースに適しています

使用状況データは、これが実際にどれほど偏っているかを裏付けています。 モバイル ページの 91.7% は少なくとも 1 つの CSS トランジションを同梱していますが、JavaScript アニメーション ライブラリをロードしているのは 18.4% のみ (Annnimate、2026)。

同じ分析によると、評判で最も有名なアニメーション ライブラリである GSAP は、全 Web サイトの約 2.2% に存在します。 Webflow は 2025 年 4 月にプラグインを含めて完全に無料になりましたが、その導入はまだ大きく進んでいません。

単純なホバー状態または単一のプロパティ変更の場合、通常、完全なキーフレームを構築するよりも単純な CSS トランジションの方が高速です。

JavaScript (EN)を使う方法は、スクロール位置に連動する動き、ユーザー操作の順序制御、生成ツールでは作れない物理ベースのイージングが必要なアニメーションに向いています。

CSS キーフレーム アニメーション ジェネレーターが機能しない場合は?

キーフレーム ジェネレーターは、単一要素の時間ベースのモーションを適切に処理します。アニメーションがその周囲のページについて何かを知る必要がある瞬間に、それは困難になります。

ジェネレーターが一般的に不足している箇所:

• スクロール連動モーション。固定期間ではなく、ユーザーがスクロールした距離に進行状況が関連付けられます。
• 兄弟が最初に終了するのを待つカードなど、依存関係のある複数の要素にわたるシーケンス
• パス モーフィング、または安定する前に数回振動する真のスプリング物理学 (このツールの Spring オプションのような 1 つの 3 次ベジエ オーバーシュートは、ほとんどのジェネレーターの限界です)
• モーション設定の自動処理

スクロール駆動のモーションが最も明確なギャップです。 CSS はアニメーション タイムラインを通じてこれをネイティブにサポートするようになり、Chrome 145 では 2026 年にその作業のさらなる拡張機能としてスクロール トリガー アニメーション (EN)を追加しました (Chrome for Developers)。

固定期間のタイムラインを中心に構築されたジェネレーターには、「ユーザーがスクロールしている間にこれを実行する」ためのスライダーがありません。その構文は、現在のキーフレーム ジェネレーターがエクスポートするものの外に存在します。

複雑なシーケンスでも同様の壁にぶつかります。ある要素のアニメーションが別の要素のアニメーションをトリガー、一時停止、または待機する必要があると、ジェネレーターの単一タイムライン モデルでは依存関係を表現できなくなります。

アクセシビリティは、より静かな障害モードです。ジェネレーターは、それ自体の出力を pres-reduced-motion メディア クエリでラップすることはなく、そのステップは完全に手動のままです。

それをスキップすることは小さな見落としではありません。 2021 年から 2023 年の間に収集された NHANES データ (Laryngscope、2026) によると、40 歳から 69 歳の成人の 36.2% が特定の平衡感覚とめまいの問題を報告しており、無制限の動きはまさに、動きに関するウェブ アクセシビリティ (EN)に関するガイダンスが保護のために存在するグループに影響を及ぼします。

パス モーフィングは同じバケット内にあります。ジェネレーターは、実際のモーフに必要なポイントごとのパス データではなく、トランスフォームとプロパティの補間を処理するため、その作業は通常、代わりに専用の SVG (EN) アニメーション ライブラリを経由します。

キーフレーム ジェネレーターを使用して CSS アニメーションを作成するにはどうすればよいですか?

ワークフローは非常に短いため、順序がわかれば数分で完了します。

1. アニメーション化するプロパティ (通常は変換、不透明度、または色) を選択します
2. 開始キーフレーム停止と終了キーフレーム停止を 0% と 100% に設定します。
3. バウンス、ウォブル、またはマルチステージエフェクトに必要な中間ストップを追加します。
4. 期間とイージング関数を選択し、結果をライブでプレビューします
5. 単一のデフォルトパスが必要でない場合は、遅延、反復回数、および方向を設定します。
6. コードをエクスポートしてスタイルシートに貼り付け、アニメーション名をターゲット要素に適用します。

ほとんどの人がステップ 3 でつまづきます。間に停止せずに 0% から 100% まで真っすぐにジャンプすると、イージング カーブがどれほど優れていても、平坦に見えるモーションが生成されます。

ステップ 6 は、別の方法で人々を引き上げます。エクスポートされたアニメーション名は一般的なものが多く、名前の競合を確認せずに既存のルールの下に貼り付けると、ページ上にすでにあるものが静かにオーバーライドされる可能性があります。

発送前に次の 3 つのことを確認してください。

• 接続が遅い場合やフレーム レートが低い場合でもアニメーションは持続しますか?
• アニメーションが終了すると、要素は適切な休止状態に戻りますか?
• モーションを減らしたメディア クエリにはルール全体をラップする必要がありますか?

この最後のチェックがジェネレーター自体から行われることはほとんどありません。エクスポート後にこれを追加し、モーションの削減を要求していないユーザーに対してのみ再生されるように、アニメーションの短縮表現をラップします。

@media (prefers-reduced-motion: no-preference) {
  .element { animation: fadeIn 1.5s ease both; }
}

生成された CSS アニメーションのパフォーマンスを最適化するにはどうすればよいですか?

プロパティの選択は、デュレーションやイージングが機能する前にパフォーマンス ストーリーのほとんどを決定します。

知っておくべき主要な数値:

• 非合成アニメーションは 90 パーセンタイルに位置し、デスクトップではページごとに 13 個、モバイルでは 11 個です (HTTP Archive Web Almanac、2025)
• アニメーション プロパティはすでにモバイル ページの 77% とデスクトップ ページの 76.8% に表示されています (HTTP Archive Web Almanac、2022)
• ウェブ全体の移行時間の中央値はわずか300 ミリ秒です (HTTP Archive Web Almanac、2020)

注目すべきは最初の図です。いくつかの重いページには 12 個以上の非合成アニメーションが含まれており、各フレームでレイアウトの再計算が強制されます。

Chrome の Lighthouse 監査はこれを直接捕捉し、非合成アニメーション チェックの対象となる特定のアニメーション プロパティにフラグを立てます。

それほど劇的ではありませんが、期間も重要です。 300 ミリ秒の中央値は厳密なルールではありませんが、装飾的なアニメーションで 1 秒を大きく超えると、通常はスムーズというよりも動きが鈍いように見えます。

同じページで複数のアニメーションを同時に実行すると、別の方法で加算されます。それぞれがコンポジターをアクティブに保つため、モバイル デバイスでは、タイミングの良い単一のエフェクトよりも早くバッテリーが消耗します。

生成されたキーフレーム コードを使用するときに起こりやすい間違いは何ですか?

生成されたキーフレーム コードに関する問題のほとんどは、ツール内の設計ステップ中ではなく、エクスポート後に発生します。

カスタム プロパティ行は、エラーをスローせずに静かに失敗するため、見落とされがちです。

Houdini の @property ルールが可能にする種類のアニメーション化されたカスタム プロパティは、依然として実際のページのごく一部、つまり HTTP アーカイブ データセット全体のうちおよそ 1,030 のデスクトップ ページと 1,175 のモバイル ページに表示されます (Web Almanac、2021)。

@property 自体は、Firefox が 2024 年 7 月のバージョン 128 で追加して以来、すべての主要なブラウザで動作するようになりました。使用率が低いということは、この手法が大規模な実戦テストを受けていないことを示しているため、効果への唯一の道としてではなく、段階的な強化として扱ってください。

モーションを減らした行については、ウェブ アクセシビリティ チェックリスト (EN)に対してクイック パスを実行すると、ジェネレーターのエクスポート ボタンでは検出できないもののほとんどが検出されます。

報告する価値のある小さな間違い: アニメーションの短縮表現のプロパティの順序を確認せずに、エクスポートされたコードを貼り付けました。

短縮表現で継続時間と遅延を混同することは、古典的なコピー＆ペーストのエラーです。両方とも時間値であり、これらが入れ替わってもブラウザは警告しないからです。

デバッグ中に省略表現ではなく個別の手書きプロパティを読み取ると、結合された行を見つめるよりも早くこれを把握できます。

よくある質問：CSSキーフレームアニメーション作成

CSSアニメーションとCSSトランジションの違いは何ですか?

トランジションは、ホバーなどの変化によってトリガーされ、開始と終了の 2 つの状態の間を移動します。

CSS アニメーションは、@keyframes を介して独自のタイムライン上で実行され、トリガー イベントとは関係なく、必要な数の中間停止が行われます。

CSS キーフレーム アニメーション ジェネレーターは無料で使用できますか?

はい。このカテゴリは、出力がサーバー処理を行わない単なる静的 CSS であるため、ほぼ完全に無料の広告サポートまたはオープンソース ツールで実行されます。

有料のアニメーション ソフトウェアは存在しますが、特に @keyframe の場合は無料のブラウザ ツールで一般的なユースケースのほぼすべてをカバーできます。

生成されたキーフレーム コードはエクスポート後に手動で編集できますか?

はい。多くの場合、編集が必要です。書き出されるのは通常のCSSなので、どのエディターでも開いて、手書きのキーフレームと同じように編集できます。

アニメーションの名前変更、停止の調整、またはタイミングの微調整は、元のジェネレーターにロックインされません。

複数のキーフレーム アニメーションを同じ要素上で同時に実行できますか?

はい。 animation-name プロパティに複数の名前をカンマ区切りでリストし、animation-duration および他のサブプロパティの一致する値も指定します。

各キーフレームのルールは、同じ要素上でそれぞれ独立して動作します。そのため、回転とフェードのような効果を組み合わせられます。

CSS キーフレーム アニメーション ジェネレーターで最初に修正すべきものは何ですか?

CSS キーフレーム アニメーション ジェネレーターは、プロパティの選択で最初に配置されます。変換と不透明度はコンポジター スレッドでモーションを維持しますが、その選択が固定されるまでは、持続時間、カーブの調整、エクスポートのクリーンアップは二次的なものになります。

最初にプロパティを修正し、次にタイミングを調整し、次にエクスポートをクリーンアップすると、実際のコンテンツがプレビューを置き換えたときにジェネレーターの出力が壊れるのを防ぐことができます。

• プロパティの選択: 幅または上部の変換または不透明度
• タイミングとイージング: 推測ではなく、ライブ プレビューに基づいて調整されます
• エクスポートのクリーンアップ: 名前変更されたクラス、チェックされたプレフィックス、prefers-reduced-motion でラップ

プロパティの選択を固定するには、最初にコストがかかります。幅や色をスムーズにアニメーション化するためのその後のリクエストはコンポジター スレッドで実行されず、 より遅いレイアウトをトリガーするフォールバックが強制されます。

エフェクトで CSS プロパティを超えたピクセルレベルの制御が必要になったら、キーフレームからキャンバス アニメーション (EN)に移行するのが、インタラクティブ グラフィックスの自然な次のステップです。