Build smooth CSS transitions visually. Select properties, set duration and easing, add multiple transitions, and copy the generated CSS — no coding required.

Hover over the preview element to see your transition in action. Add multiple properties and use presets to get started quickly.

Presets

Transition Settings

  <label for="tr-property">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">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">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">Timing Function</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 (custom)</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()">+ Add Transition</button>
    <button class="tr-btn tr-btn-secondary" onclick="trClearAll()">Clear All</button>
  </div>
</div>

<div class="tr-panel" style="margin-top:16px;">
  <h3>Transition List</h3>
  <div class="tr-transitions-list" id="tr-list">
    <!-- populated by JS -->
  </div>
  <div style="font-size:12px;color:#94a3b8;" id="tr-list-empty">No transitions added yet. Configure and click "Add Transition".</div>
</div>

Live Preview

Hover me
hover to trigger
The element above uses your generated transitions.
<div class="tr-panel" style="margin-top:16px;">
  <h3>Generated CSS</h3>
  <div class="tr-output-block" id="tr-output">
    <button class="tr-copy-btn" id="tr-copy-btn" onclick="trCopyCSS()">Copy</button>
    <span id="tr-output-content"></span>
  </div>
  <div style="font-size:12px;color:#64748b;">Paste this into your stylesheet. Apply to the element that should animate.</div>
</div>

How to Use

  1. Select a property — choose which CSS property to animate (opacity, transform, etc.)
  2. Set duration — drag the slider from 0 to 3 seconds
  3. Set delay — optionally delay when the transition starts (0–2 seconds)
  4. Choose a timing function — pick a preset easing or draw a custom cubic-bezier curve
  5. Click “Add Transition” — adds it to the list below
  6. Repeat for additional properties
  7. Hover the preview to see all transitions in action
  8. Copy the CSS and paste it into your stylesheet

Tips & Common Patterns

Staggering multiple transitions

Add different delays to each property to create a cascading effect:

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

Smooth button hover

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

Performance tip

Prefer transform and opacity for transitions — they run on the compositor thread and avoid layout recalculations, giving you 60fps animations without jank.

Custom easing with cubic-bezier

The cubic-bezier editor lets you fine-tune your easing curve. Classic values:

  • ease-in: cubic-bezier(0.42, 0, 1, 1)
  • ease-out: cubic-bezier(0, 0, 0.58, 1)
  • spring: cubic-bezier(0.34, 1.56, 0.64, 1)
  • sharp: cubic-bezier(0.4, 0, 0.6, 1)