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

0.3s
0s

Transition List

No transitions added yet. Configure and click "Add Transition".

Live Preview

Hover me
hover to trigger
The element above uses your generated transitions.

Generated CSS

Paste this into your stylesheet. Apply to the element that should animate.

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)