Créer des icônes animées au passage de la souris en CSS

Posté le 18/07/2016 - par Amy Wiggenhauser - dans Web Design

Les animations permettent de rendre une page web dynamique et agréable à consulter, tout en donnant de l'originalité au design. Cet article présente une méthode simple permettant d'animer des icônes avec un mouvement rotatif au passage de la souris. La méthode se base sur du CSS et du HTML sans aucun codage Javascript ni Jquery.

Prérequis : connaître les bases du HTML et du CSS.

Etape 1 : Créer les icônes

Vous pouvez créer des images par vous-même à l'aide d'un logiciel de graphisme ou bien utiliser des icônes toutes prêtes disponibles en téléchargement sur le web. Les pictogrammes utilisés dans cet article sont adaptés d'icônes provenant d'une banque d'images (liens en bas de la page).

Etape 2 : Afficher les icônes en HTML

Le code suivant permet d'afficher les icônes en ligne. A noter : penser à ajouter l'attribut "alt" à chaque image. Cet attribut est important, il permet d'indiquer du texte à la place de l'image dans le cas où celle-ci ne peut pas être affichée.

<html>
  <head></head>
  <body>     
     <img src="icones-articles/icon1.png" alt="icon1" />
     <img src="icones-articles/icon2.png" alt="icon2" />
     <img src="icones-articles/icon3.png" alt="icon3" />
     <img src="icones-articles/icon4.png" alt="icon4" />
     <img src="icones-articles/icon5.png" alt="icon5" />
  </body>
</html>

Etape 3 : Animation des icônes

Nous allons animer ces images en leur donnant un mouvement rotatif au passage de la souris. Pour cela, il est nécessaire d'ajouter une classe CSS aux images (ici nous l'appellerons "rotate"), et d'insérer le fichier "style.css" contenant la définition des styles de cette classe ainsi que l'animation.

<html>
  <head>
     <link rel="stylesheet" href="style.css">
   </head>
  <body>
     <img class="rotate" src="icones-articles/icon1.png" alt="icon1" />
     <img class="rotate" src="icones-articles/icon2.png" alt="icon2" />
     <img class="rotate" src="icones-articles/icon3.png" alt="icon3" />
     <img class="rotate" src="icones-articles/icon4.png" alt="icon4" />
     <img class="rotate" src="icones-articles/icon5.png" alt="icon5" />
  </body>
</html>

Contenu du fichier "style.css" :

@keyframes myrotate {
     0% {
       transform: rotate(0deg); //rotation de 0 degrés au début de l'animation
     }
    100% {
       transform: rotate(359deg); //rotation de 359 degré à la fin de l'animation
    }
}

.rotate:hover {
     animation: myrotate 1.5s infinite linear; //attribue l'animation nommée "myrotate" à la classe "rotate" au passage de la souris. L'animation dure 1.5 secondes et se répète indéfiniment, avec un déroulement linéraire.
}

.rotate {
     cursor:pointer; //affiche un curseur en forme de main sur l'image lors du passage de la souris (facultatif)
}

Etape 4 : Assurer la compatibilité sur les différents navigateurs

Ajouter les préfixes spécifiques aux différents navigateurs pour être certain que l'animation s'affichera sur le plus de navigateurs internet possibles:

@keyframes myrotate {
     0% {
       transform: rotate(0deg);
     }
    100% {
       transform: rotate(359deg);
    }
}

@-o-keyframes myrotate {
     0% {
       -o-transform: rotate(0deg);
     }
    100% {
       -o-transform: rotate(359deg);
    }
}

@-moz-keyframes myrotate {
     0% {
       -moz-transform: rotate(0deg);
     }
    100% {
       -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes myrotate {
     0% {
       -webkit-transform: rotate(0deg);
     }
    100% {
       -webkit-transform: rotate(359deg);
    }
}

@-ms-keyframes myrotate {
     0% {
       -ms-transform: rotate(0deg);
     }
    100% {
       -ms-transform: rotate(359deg);
    }
}


.rotate:hover {
     -webkit-animation: myrotate 1.5s infinite linear;
     -moz-animation: myrotate 1.5s infinite linear;
     -ms-animation: myrotate 1.5s infinite linear;
     -o-animation: myrotate 1.5s infinite linear;
     animation: myrotate 1.5s infinite linear;
}

.rotate {
     cursor:pointer;
}