HOVER ME
Hover to preview
Generated CSS
CSS transitions animate property changes smoothly over time. When a property value changes — usually on hover, focus or class toggle — the transition defines how long the change takes, its timing function (easing) and any delay before it starts.
.element {
/* property | duration | easing | delay */
transition: transform 300ms ease-in-out 0ms;
/* Multiple transitions */
transition:
transform 300ms ease-out,
opacity 200ms ease,
background-color 400ms ease-in-out;
}
| Function | Behaviour | Best for |
|---|---|---|
| ease | Slow start, fast middle, slow end | General purpose |
| ease-in | Slow start, fast end | Exit animations |
| ease-out | Fast start, slow end | Enter animations |
| ease-in-out | Slow start and end | Reversible transitions |
| linear | Constant speed | Progress bars, loaders |
| cubic-bezier() | Custom curve | Spring/bounce effects |
A transition triggers on a state change (hover, focus, class toggle) and runs once between two states. An animation (@keyframes) runs automatically, can loop, and can define multiple intermediate states. Use transitions for UI feedback, animations for decorative motion.
Any property with a numeric or color value can be transitioned — opacity, transform, background-color, width, box-shadow, etc. Properties like display and visibility are not animatable (use opacity instead of display:none).
Prefer specific properties over transition: all. Using all can trigger unintended transitions on properties you didn't mean to animate and reduces performance. Only transition the properties that actually change.
Wrap your transitions in a media query: @media (prefers-reduced-motion: no-preference) { .el { transition: transform 300ms ease; } }. This disables transitions for users who have requested reduced motion in their OS settings.
Related tools: CSS Animation Generator · Cubic Bezier Generator · CSS Transform Generator