デザイン

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

フェード、スライド、ズーム、回転、注目効果のプリセットから CSS キーフレームアニメーションを作成できます。ライブ再生されるデモ要素を見ながら、再生時間、遅延、イージング、繰り返し回数、再生方向、フィルモードを調整し、完成した @keyframes と animation ルールをスタイルシートへコピーできます。登場アニメーション、ローダー、ホバー反応、通知、ヒーロー領域に使え、処理はすべてブラウザ内で完結します。

  • フェード、スライド、ズーム、回転、注目効果のプリセットから選択
  • 再生時間、遅延、タイミング関数、繰り返し回数、再生方向、フィルモードをリアルタイム調整
  • デモ要素がアニメーションをループ再生し、再再生と一時停止を操作可能
  • 完全な @keyframes ブロックと animation ショートハンドをコピーして貼り付け
  • すべてブラウザ内でローカルに動作し、作業中に何もアップロードしません
工具/CSS アニメーションジェネレーター
上へフェードイン
6
1000ms
0ms
fadeInUp
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animated-element {
  animation: fadeInUp 1000ms ease 0ms infinite normal both;
}
クイック操作

概要

キーフレームとそれが生み出す動きを並べて配置することで、アニメーションが書いては再読み込みして確認するものではなく、見ながら調整できるものになります。

  1. 01

    厳選されたエフェクトライブラリ

    空のファイルからキーフレームを一つずつ書く代わりに、フェード、スライド、ズーム、注目効果、回転にグループ分けされた名前付きエフェクトから始められます。

  2. 02

    ループするライブプレビュー

    デモ要素が選択したアニメーションをループ再生し、再再生と一時停止に対応するので、名前ではなく実際の動きそのものを判断できます。

  3. 03

    完全なアニメーション制御

    再生時間、遅延、タイミング関数、繰り返し回数、再生方向、フィルモードを調整でき、変更はすぐに反映されます。

  4. 04

    標準的でコピーしやすい出力

    出力は標準的な CSS プロパティ名を使った本物の @keyframes ブロックと animation ショートハンドで、任意のスタイルシートに貼り付けられます。

  5. 05

    イージングを内蔵

    CSS キーワードやばね感のある cubic-bezier から選べるので、同じキーフレームを滑らか、きびきび、弾むようにと変化させられます。

  6. 06

    プライバシー重視の設計

    ライブラリ、プレビュー、CSS 生成はすべてブラウザ内でローカルに動作するため、未公開のインターフェース作業が端末から外に出ることはありません。

使い方

要素がどう現れ、どう反応すべきかという漠然とした発想を、完全でコピーできる CSS アニメーションに変えます。

  1. 01

    思い描いている動きに近いエフェクトをライブラリから選びます。

  2. 02

    再生時間と遅延を、ちょうどよいテンポになるまで設定します。

  3. 03

    タイミング関数を選び、同じキーフレームの手触りがどう変わるかを確認します。

  4. 04

    繰り返し回数、再生方向、フィルモードを設定し、アニメーションの繰り返し方と収まり方を制御します。

  5. 05

    再再生で動きを繰り返し確認し、@keyframes とショートハンドをスタイルシートにコピーします。

詳細

アニメーションはイージング曲線だけではないため、このジェネレーターは動きを定義するキーフレームと、その実行方法を制御するプロパティの両方をカバーします。

  • フェード、スライド、ズーム、注目効果、回転に分類された名前付きエフェクトのライブラリ
  • 各エフェクトを名前ではなく実際の動きとして判断できるループ再生のデモ要素
  • 調整中にアニメーションを繰り返し確認したり固定したりできる再再生と一時停止
  • 変更した瞬間にプレビューを更新する再生時間と遅延のスライダー
  • CSS キーワードとばね感のある cubic-bezier をカバーするタイミング関数プリセット
  • 環境的でループするエフェクトに適した、真の無限ループを含む繰り返し回数
  • normal、reverse、alternate、alternate-reverse に対応した再生方向の制御
  • 実行の前後で要素が開始状態や終了状態を保つフィルモードの制御
  • 完全な @keyframes ブロックと対応する animation ショートハンドを一組にした出力
  • すべてブラウザ内でローカルに生成され、機密のインターフェース動作を非公開に保ちます

活用シーン

アニメーションは注意を導き、状態を伝え、仕上がりを高めますが、適切なエフェクトは何が起きているかとその理由によって決まります。実際の要素で試すのが、何が合うかを決める最速の方法です。

  1. 登場アニメーション

    コンテンツの読み込みやスクロールでの表示時に、フェード、スライド、ズームで要素を画面へ滑らかに登場させます。

  2. 注意喚起とフィードバック

    シェイク、パルス、バウンスで、エラーや新着メッセージ、操作が必要なボタンへ視線を引きます。

  3. 読み込みと環境的な動き

    無限の回転やパルスは、ユーザーに気づくよう強いることなく、ローダーやアイドル表示に生気を与えます。

  4. ホバーとインタラクションの仕上げ

    ホバーやクリック時の素早いズームやウォブルが、操作可能な要素を反応がよく意図的に感じさせます。

  5. トーストと通知

    トーストを端からスライドインさせて収めると、新着メッセージが突然現れるのではなく到着したように読めます。

  6. マーケティングとヒーロー領域

    ランディングページでずらしたフェードやスライドが、ヒーロー領域にリズムと、設計されているという印象を与えます。

  7. CSS アニメーションの学習

    生成された @keyframes をライブ結果と並べて読むことは、アニメーション構文が動きにどう対応するかを理解する明快な方法です。

  8. モーションシステムの構築

    再利用できる名前付きアニメーションを少数に絞り、製品全体の動きが一貫した手触りを共有するようにします。

関連情報

アニメーションのタイミングはイージングで形づくられるため、 三次ベジェ曲線ジェネレーター で曲線そのものを磨き込みましょう。エフェクトが高さの階層も変える場合は、 ボックスシャドウジェネレーター の影の奥行きと組み合わせ、動きと影が互いに干渉せず一緒に変化するようにします。

使い方のヒント

アニメーションは使いすぎやすいため、いくつかの習慣が、動きを雑然とさせず気を散らさず、目的が明確で一貫したものに保ちます。

  • できるだけ transform と opacity をアニメーション化します。ブラウザが最も滑らかに処理できるプロパティだからです。
  • 登場とインタラクションのアニメーションは約 200〜500ms と短く保ち、インターフェースを軽快に使えるようにします。
  • シェイクやバウンスなどの注目効果は、本当に気づいてほしい場面のために取っておきます。
  • 無限ループはローダーなどの環境的な動きにのみ使い、ユーザーが読もうとしているコンテンツには使いません。
  • タイミング関数を意図に合わせ、登場には ease-out、退場には ease-in を使います。
  • 要素がアニメーション終了後に終了状態を保つべき場合は、フィルモード forwards か both を使います。
  • 動きを減らす設定を尊重し、それを求めるユーザーには大きな動きを弱めるか取り除きます。
  • コンポーネントごとに独自のキーフレームを書くのではなく、少数の名前付きアニメーションに統一します。

制限事項

このツールは CSS キーフレームアニメーションの生成に重点を置いているため、いくつかの関連領域は意図的に対象外です。

  • 生成するのは CSS @keyframes アニメーションであり、JavaScript やライブラリ駆動（ばね物理など）のアニメーションではありません。
  • エフェクトは単一のデモ要素に作用するため、複数要素のずらしや順序付けはご自身のレイアウトで確認してください。
  • 出力はアニメーション本体であり周囲のレイアウトではないため、配置やサイズは既存の CSS から取得します。
  • プレビューは固定のデモ要素を使うため、実際のコンポーネントの本来のサイズで手触りを確認してください。
  • スクロール連動やビュータイムラインのアニメーションは別の仕組みであり、ここでは生成しません。
  • 体感の滑らかさはフレームレートや他に再描画されている要素にも左右されますが、本エディターはそれを計測しません。

よくある質問

CSS アニメーションを作り、エフェクトを公開できるスタイルシートのコードに変えるときに最もよく出てくる質問です。

CSS キーフレームアニメーションとは何ですか？

@keyframes ルールで定義するアニメーションで、プロパティがタイムライン上でどう変化するかを列挙し、animation プロパティで要素に適用して再生時間、イージング、繰り返しなどを制御します。

生成された CSS はそのまま本番環境で使えますか？

はい。出力は標準の @keyframes ブロックと animation ショートハンドで、変更せずに任意のスタイルシートへ貼り付けられます。コードに合わせてキーフレームやセレクターの名前を変更しても構いません。

フィルモードは何をしますか？

animation-fill-mode は、アニメーション実行の前後で要素がどう見えるかを制御します。forwards は最後のキーフレームを保ち、backwards は遅延中に最初のキーフレームを適用し、both は両方を行います。

アニメーションを永遠にループさせるには？

繰り返し回数を infinite に設定します。alternate 方向と組み合わせると、開始に戻らず各サイクルで逆再生され、パルスや環境的な動きに適します。

CSS のフェードインやスライドインはどう作れますか？

フェードまたはスライドのプリセットを選び、プレビューを見ながら再生時間とイージングを調整し、生成された @keyframes と animation ルールをコピーします。貼り付ける前に、キーフレーム名やセレクターをプロジェクトに合わせて変更できます。

どのプロパティをアニメーション化するのが最適ですか？

transform と opacity が最も高性能です。ブラウザが高コストなレイアウトや描画なしに処理できるためです。エフェクトが滑らかに保たれるよう、ライブラリはこれらを優先します。

エフェクトのイージングは変えられますか？

はい。ばね感のある cubic-bezier を含む任意のタイミング関数を選べ、同じキーフレームが選んだ曲線に応じて滑らか、きびきび、弾むように見えます。

作業中に何かアップロードされますか？

いいえ。エフェクトライブラリ、ライブプレビュー、CSS 生成はすべてブラウザ内でローカルに動作するため、未公開の製品 UI や機密のインターフェース動作にも安全です。

関連ツール

動きは洗練されたインターフェースの一層にすぎません。アニメーションが決まったら、イージングと奥行きを磨き、タイミング、階層、動きがすべて一つの考え抜かれたデザインとして読めるようにします。