Smooth property changes over time. Hover or interact with elements to see transitions in action.
1. Simple Color Transition
Hover to see background color change smoothly.
Hover Me
transition: background-color 0.5s ease;
2. Multiple Properties
Color, transform, and shadow transition together.
Hover Me
transition:
background-color 0.3s,
transform 0.5s,
box-shadow 0.3s;
3. Button Micro-Interaction
Professional button with lift effect.
transition:
background-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
4. Overlay Transition
Smooth overlay reveal on hover.
.card::after {
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::after {
opacity: 1;
}
5. Timing Functions Comparison
Hover over each bar to see different easing curves in action.
ease (default)
linear
ease-in
ease-out
ease-in-out
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2);