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