CSS Transitions

Beginner ~9 min read

What are Transitions?

Transitions create smooth changes between property values. Perfect for hover effects, focus states, and interactive elements!

Use transition to animate property changes. Hover over the boxes to see the effect!

HTML

CSS

<button class='btn'>Hover me!</button>

transition-duration controls how long the transition takes. Use seconds (s) or milliseconds (ms).

HTML

CSS

<div class='box fast'>0.2s</div>
<div class='box medium'>0.5s</div>
<div class='box slow'>1s</div>

transition-timing-function controls the speed curve: ease, linear, ease-in, ease-out, ease-in-out.

HTML

CSS

<div class='box linear'>linear</div>
<div class='box ease'>ease</div>
<div class='box ease-in-out'>ease-in-out</div>

transition-delay adds a pause before the transition starts.

HTML

CSS

<div class='box delay-0'>No delay</div>
<div class='box delay-1'>0.3s delay</div>
<div class='box delay-2'>0.6s delay</div>

Transition multiple properties at once by separating them with commas, or use all.

HTML

CSS

<div class='card'>Hover for multiple transitions!</div>

Combine all transition properties: transition: property duration timing-function delay.

HTML

CSS

<button class='btn-1'>Button 1</button>
<button class='btn-2'>Button 2</button>

Pro Tip: Keep transitions fast (0.2-0.3s) for better UX. Slow transitions can make your site feel sluggish!

Which timing function creates a constant speed transition?

ease

linear

ease-in-out

ease-out