Nous pouvons combiner toutes les propriétés liées à la transition en une seule ligne.

transition: <property> <time> <time_function> <delay>;

Imaginons que nous devons ajouter une propriété de transition à l'élément. Nous attendons :

• le changement de la propriété background-color ;
• la durée est de 1.2s ;
• la fonction temporelle doit être ease-in-out ;
• le délai est de 250ms.

Forme longue

transition-property: background-color;
transition-duration: 1200ms;
transition-timing-function: ease-in-out;
transition-delay: 250ms;

Forme abrégée

transition: background-color 1200ms ease-in-out 250ms;

Remarque

Il n'y a aucune différence de syntaxe pour le navigateur. Nous pouvons choisir l'option que nous préférons.