HTML & CSS Course
HTML & CSS
/
Beginner

CSS Transitions

Definition

A CSS module that lets you create gradual transitions between the values of specific CSS properties.

Explain Like I'm New

If you hover over a button and it turns from Blue to Red instantly, it feels jarring. A Transition tells the browser: 'When the color changes, don't do it instantly. Take 0.3 seconds to smoothly blend the blue into red.'

Real World Example

Almost every button on the modern web. When you hover your mouse over it, it smoothly lights up or slightly grows in size.

Common Use Cases

  • •Hover effects
  • •Smooth UI feedback

Interactive Example

 Interview Questions
basic
  • What are the two most common properties provided to the `transition` shorthand?
intermediate
  • Why is it better to put the `transition` property on the base element rather than the `:hover` state?
Flash Cards
Question
Common properties?
Click to reveal answer
Answer
The property to animate (e.g., `background-color` or `all`) and the duration (e.g., `0.3s`).
Question
Why on the base element?
Click to reveal answer
Answer
If you put `transition` on the `:hover` state, it will smoothly transition WHEN you hover. But when you move your mouse away (un-hover), it instantly snaps back because the transition rule no longer applies. Putting it on the base element ensures it is smooth in BOTH directions.