Sommaire

Les Transition:créertransitions

1. Créer des transitions

Pour une propriété CSS spécifiée, les transitions vont vous permettre de passer d’une valeur à une autre, avec une transition donnée. Cette transition est déclenchée si un événement est détecté au niveau de l’élément concerné. Lorsque la transition est terminée, l’élément reprend ses paramètres CSS initiaux. Les transitions vont permettre de créer de véritables animations en CSS.

Pour créer une transition, il faut tout d’abord utiliser un événement sur un élément HTML spécifié. Vous pouvez utiliser par exemple une pseudo-classe comme :hover, :active ou :focus.

Vous devez indiquer ensuite quelles sont les propriétés que vous souhaitez utiliser avec la propriété transition-property. Puis, indiquer la durée de cette transition avec la propriété transition-duration. La propriété transition-timing-function va permettre de préciser la courbe de cinétique pour la transition : une accélération ou une décélération. Enfin, la propriété transition-delay spécifie s’il y a un retard de déclenchement à appliquer à la transition. Pour utiliser toutes ces propriétés, la syntaxe raccourcie est transition.

La plupart des propriétés ...