Un élément interactif avec l’utilisation des transitions CSS pour créer un effet animé appelé aussi « micro interaction ». Pour une version plus fonctionnelle, voire la micro interaction avec javascript.
Micro interaction css
See the Pen CSS transition 00 by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté
Box1 – Transition et Transformation:.box1 est configurée pour avoir une transition sur les propriétés transform et color.
La transition dure 1 seconde pour transform et 2 secondes pour color, avec un effet « ease-out ».
Lorsqu’on survole .box1 (:hover), elle subit une rotation de -270 degrés et une mise à l’échelle de 1.5. La couleur change également en rose (#FF00FF).