Transitions vs animations
A transition interpolates between two states — rest and hover, open and closed. An animation plays a keyframe sequence on its own. For hover, focus and menu states, transitions are the lighter, more predictable tool, and they reverse cleanly when the pointer leaves.
Reading the shorthand
transition: property duration easing delay. Keep the duration between 150ms and 350ms for UI: faster feels instant but jarring, slower feels laggy. ease-out is the safe default for entering states; ease-in suits exits.
Which properties are safe to transition
- Cheap:
transform,opacity,filter - Moderate:
background-color,border-color,box-shadow - Expensive:
width,height,top/left— they trigger layout every frame
Accessibility and focus states
Never remove a focus outline without replacing it. Transition the replacement (box-shadow or outline-offset) so keyboard users get a smooth, visible indicator. Respect prefers-reduced-motion for anything longer than 200ms.
Frequently Asked Questions
Why does my transition not fire?
The property must actually change between states, and the transition must be declared on the base state, not only on :hover.
Can I transition several properties?
Yes, comma-separate them with their own timings, for example transform .2s ease, opacity .3s linear.
Does transition work on display?
No — display is not interpolatable. Use opacity plus visibility, or the newer @starting-style and transition-behavior for discrete properties.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.