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é :

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

Exemples

Changer la couleur d'un texte

Survolez-moi !

Recolorer et déplacer un texte

Survolez-moi !

Changer l'opacité d'une image

crocus crocus

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).