Contexte
Votre thème est un peu chiche en animation css?
Vous trouverez ici une petite animation facile à implémenter.
Attention cependant à ne pas abuser des animations, sauf si vous faites un site sur le carnaval. Dans la très grande majorité des cas, un site réussi est un site sobre, ne l’oubliez pas.
Votre HTML
Tout d’abord, il vous faut isoler un conteneur pour votre élément à animer.
Deux solutions :
- vous prenez l’inspecteur de votre navigateur, et vous cherchez la première div qui contient votre élément.
- via l’éditeur riche, vous basculez en mode code, et vous insérez une div autour de votre élément.
Dans l’exemple qui suit, on va insérer une div. Pour identifier cette div, on lui colle une classe : ip_rotate.
Le code html va ressembler à quelque chose comme ça :
<div class="ip_rotate">
<img src="https://iparnet.fr/wp-content/uploads/2017/02/logoyc60.png" alt="Logo Iparnet"/>
</div>L’élément sur lequel on va appliquer l’animation css est un « img », c’est à dire une image.
Pour information, vous pouvez appliquer cet effet sur n’importe quel élément html inclus dans la div (p, h1 …).
Votre CSS
.ip_rotate:hover img {
-webkit-animation-name: ip_rotate;
animation-name: ip_rotate;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@-webkit-keyframes ip_rotate {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
50% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
@keyframes ip_rotate {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
50% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}Le sélecteur .ip_rotate:hover img indique que lorsqu’on va survoler (:hover) l’élement html possédant la classe ip_rotate, le navigateur va déclencher l’animation css sur l’élément img.
Ensuite on double toutes les lignes afin de maximiser la compatibilité des navigateurs.
Et voici le résultat (survolez l’icône avec la souris) :
