How to create smooth property changes with transitions
Understanding transition-property, duration, and timing
Using transition delays effectively
Transitioning multiple properties with different settings
Creating interactive button and card effects
Understanding timing functions for natural motion
Building practical UI patterns: dropdowns, image zooms, color changes
Performance tips for smooth 60fps transitions
Introduction to CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property
changes take effect immediately, you can cause them to occur gradually over a specified duration. This creates smooth,
polished interactions that feel responsive and professional.
Transitions are triggered by state changes—typically :hover, :focus, or :active pseudo-classes, or by JavaScript
adding/removing classes. They're perfect for interactive UI elements like buttons, links, cards, and form controls.
Transition Property
The transition-property specifies which CSS properties should be transitioned. You can transition
all properties, specific ones, or multiple properties simultaneously.
The transition-duration property sets how long the transition takes to complete. Shorter durations
feel snappy, while longer durations create dramatic effects.
Timing functions control the acceleration curve of the transition, creating different motion feels. The default
ease timing gives the most natural feel for most UI interactions.
.element {
transition-timing-function: linear; /* Constant speed */
transition-timing-function: ease; /* Slow start, fast, slow end (default) */
transition-timing-function: ease-in; /* Slow start, accelerates */
transition-timing-function: ease-out; /* Fast start, decelerates */
transition-timing-function: ease-in-out; /* Slow start and end */
/* Custom curve with cubic-bezier */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Stepped timing - discrete jumps instead of smooth */
transition-timing-function: steps(4); /* 4 equal steps */
transition-timing-function: steps(4, jump-end); /* Default: jump at end of each step */
transition-timing-function: steps(4, jump-start); /* Jump at start of each step */
/* Linear with stops - precise control over easing curve */
transition-timing-function: linear(0, 0.25, 1); /* Custom linear points */
}
Transition Delay
The transition-delay property waits a specified amount of time before starting the transition.
Useful for creating staggered effects or preventing accidental hovers.