Transition CSS3 : introduction

Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché :

• soit via une pseudo-classe telles que :hover, :focus ou :active
• soit via JavaScript

Pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum :

• La ou les propriété(s) à animer (transition-property)
• La durée de l'animation (transition-duration)

Exemples

Changer l'opacité d'une image

Etape 01 : insérer les deux images les unes à la suite des autres dans le code HTML, les identifier
Etape 02:les superposer en les positionnant en absolu
Etape 03:spécifier que l'image du premier plan a une opacité 1, déterminer une durée et un effet de transition
Etape 04: spécifier qu'au survol, elle aura une opacité de 0 (et ainsi faire apparaître l'image en arrière-plan).