Retour au cours

Lesson 91: Introduction to CSS Transitions

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

91. Introduction to CSS Transitions

Transitions allow property changes to happen smoothly over a duration, rather than instantly, creating visual feedback and a polished user experience (e.g., a button changing color smoothly on hover).

The Four Transition Properties

To define a transition, you must specify what to transition, and for how long.

1. transition-property

Specifies which CSS property should be animated. You can list multiple properties or use all.

2. transition-duration

Specifies how long the transition should take (in seconds s or milliseconds ms).

Example

css .button { background-color: red; padding: 10px;

/* Make the background color change take 0.5 seconds */ transition-property: background-color; transition-duration: 0.5s; }

.button:hover { background-color: blue; /* The change from red to blue will be smooth */ }

Note: Properties that transition well are those with continuous numerical values (color, size, position, opacity). Properties that change discreetly (like display: none to display: block) cannot be transitioned.