CSSトランジション ジェネレーター

CSSトランジションを視覚的に作成できる無料ツールです。プロパティ・継続時間・タイミング関数・遅延を設定し、複数のトランジションを組み合わせて、すぐに使えるCSSをコピーできます。

使い方

1. プロパティを選択 — アニメーションするCSSプロパティ（opacity、transformなど）を選ぶ
2. 継続時間を設定 — スライダーで0〜3秒の範囲で指定
3. 遅延を設定 — 必要であれば開始を0〜2秒遅らせる
4. タイミング関数を選択 — プリセットのイージングか、cubic-bezierでカスタム曲線を描く
5. 「追加する」をクリック — リストにトランジションが追加される
6. 繰り返し — 複数プロパティを重ねる場合は同じ手順を繰り返す
7. プレビューをホバー — すべてのトランジションが同時に動くのを確認
8. CSSをコピー — スタイルシートに貼り付けて完成

よく使うパターン

ボタンのホバーエフェクト

transition: background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;

フェードイン（ページロード時）

transition: opacity 0.5s ease-in-out;

カードのリフトアップ

transition: transform 0.25s ease-out,
box-shadow 0.25s ease-out;

スタッガード（時差付き）アニメーション

transition: opacity 0.3s ease 0s,
transform 0.3s ease 0.1s,
background-color 0.3s ease 0.2s;

パフォーマンスのヒント

transform と opacity はGPUで処理されるため、ほかのプロパティより高速に動作します。width や height のレイアウトに影響するプロパティはリフロー（再レイアウト）を引き起こすため、パフォーマンスが落ちることがあります。なめらかな60fpsアニメーションを目指すなら transform を優先しましょう。

関連ツール

• CSSアニメーション ジェネレーター — @keyframes を使ったキーフレームアニメーションを視覚的に作成
• CSS Transform ジェネレーター — rotate・scale・skew・translateなどtransform値を視覚的に構築