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

プレビュー要素にホバーするとトランジションを確認できます。複数プロパティを組み合わせてプリセットも活用してみてください。

プリセット

トランジション設定

  <label for="tr-property">プロパティ</label>
  <select id="tr-property">
    <option value="all">all（すべて）</option>
    <option value="opacity" selected>opacity（透明度）</option>
    <option value="transform">transform（変形）</option>
    <option value="background-color">background-color（背景色）</option>
    <option value="color">color（文字色）</option>
    <option value="width">width（幅）</option>
    <option value="height">height（高さ）</option>
    <option value="border-radius">border-radius（角丸）</option>
    <option value="box-shadow">box-shadow（影）</option>
    <option value="padding">padding（内余白）</option>
    <option value="margin">margin（外余白）</option>
    <option value="font-size">font-size（文字サイズ）</option>
    <option value="letter-spacing">letter-spacing（字間）</option>
    <option value="border-color">border-color（枠線色）</option>
    <option value="outline">outline（アウトライン）</option>
    <option value="filter">filter（フィルター）</option>
    <option value="left">left（左位置）</option>
    <option value="top">top（上位置）</option>
  </select>

  <div class="tr-slider-row">
    <div class="tr-slider-header">
      <label for="tr-duration">継続時間</label>
      <span class="tr-slider-val" id="tr-duration-val">0.3s</span>
    </div>
    <input type="range" id="tr-duration" min="0" max="300" value="30" oninput="trUpdateDuration(this.value)">
  </div>

  <div class="tr-slider-row">
    <div class="tr-slider-header">
      <label for="tr-delay">遅延</label>
      <span class="tr-slider-val" id="tr-delay-val">0s</span>
    </div>
    <input type="range" id="tr-delay" min="0" max="200" value="0" oninput="trUpdateDelay(this.value)">
  </div>

  <label for="tr-timing">タイミング関数</label>
  <select id="tr-timing" onchange="trTimingChanged()">
    <option value="ease" selected>ease（標準）</option>
    <option value="linear">linear（一定）</option>
    <option value="ease-in">ease-in（加速）</option>
    <option value="ease-out">ease-out（減速）</option>
    <option value="ease-in-out">ease-in-out（加減速）</option>
    <option value="step-start">step-start（ステップ開始）</option>
    <option value="step-end">step-end（ステップ終了）</option>
    <option value="cubic-bezier">cubic-bezier（カスタム）</option>
  </select>

  <div class="tr-bezier-section" id="tr-bezier-section" style="display:none">
    <div class="tr-bezier-labels">
      <span>x1</span><span>y1</span><span>x2</span><span>y2</span>
    </div>
    <div class="tr-bezier-inputs">
      <input type="number" id="tr-bz-x1" value="0.25" min="0" max="1" step="0.01" oninput="trUpdateBezier()">
      <input type="number" id="tr-bz-y1" value="0.1" min="-2" max="3" step="0.01" oninput="trUpdateBezier()">
      <input type="number" id="tr-bz-x2" value="0.25" min="0" max="1" step="0.01" oninput="trUpdateBezier()">
      <input type="number" id="tr-bz-y2" value="1" min="-2" max="3" step="0.01" oninput="trUpdateBezier()">
    </div>
    <canvas id="tr-bezier-canvas" width="200" height="160"></canvas>
  </div>

  <hr class="tr-divider">

  <div class="tr-btn-row">
    <button class="tr-btn tr-btn-primary" onclick="trAddTransition()">+ 追加する</button>
    <button class="tr-btn tr-btn-secondary" onclick="trClearAll()">すべてクリア</button>
  </div>
</div>

<div class="tr-panel" style="margin-top:16px;">
  <h3>追加済みトランジション</h3>
  <div class="tr-transitions-list" id="tr-list"></div>
  <div style="font-size:12px;color:#94a3b8;" id="tr-list-empty">まだ追加されていません。設定して「追加する」をクリックしてください。</div>
</div>

ライブプレビュー

ホバー
してみて
ホバーで動作確認
上の要素が生成したトランジションで動作します。
<div class="tr-panel" style="margin-top:16px;">
  <h3>生成されたCSS</h3>
  <div class="tr-output-block" id="tr-output">
    <button class="tr-copy-btn" id="tr-copy-btn" onclick="trCopyCSS()">コピー</button>
    <span id="tr-output-content"></span>
  </div>
  <div style="font-size:12px;color:#64748b;">このCSSをスタイルシートに貼り付けて使用してください。</div>
</div>

使い方

  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作業と同じくらい、会計もシンプルにしませんか？
freeeなら確定申告・請求書・経費管理をすべてまとめて自動化。面倒な帳簿付けから解放されます。

freeeを無料で試す ※ 30日間無料トライアルあり。クレジットカード不要。
本ページはアフィリエイト広告（A8.net）を含む場合があります。掲載しているサービスの評価・内容はすべて独自の基準によるものです。
A8.net | プライバシーポリシー