Transition Generator
Pick what should animate, how long it takes and how it eases, then hover the preview to feel it. Copy the Tailwind classes when it feels right.
The transition plays on hover and on the way back.
cubic-bezier(0.4, 0, 0.2, 1)
transition-all duration-300 ease-in-out
transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
Frequently asked questions
What does transition-all duration-300 do in Tailwind?
transition-all animates every property that changes, and duration-300 makes the animation last 300 milliseconds. It is convenient, but transition-colors or transition-transform are cheaper because they only animate what you need.
Which Tailwind duration values exist?
duration-75, 100, 150, 200, 300, 500, 700 and 1000 are built in. Anything else works with an arbitrary value such as duration-[250ms]. This tool picks the named class when one matches.
How do I use a custom easing curve?
Switch to Custom and shape the cubic-bezier with the four sliders. The tool outputs an arbitrary class like ease-[cubic-bezier(0.34,1.56,0.64,1)]. Values above 1 give an overshoot, a springy bounce.
How long should a UI transition be?
Hover and click feedback feels best at 100 to 200ms. Small movements like dropdowns suit 200 to 300ms, and larger panels 300 to 500ms. Anything over about 500ms starts to feel slow.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.