Comment animer une rotation d’icon simplement en HTML & CSS en 5 min ?

Non classé, Web DevelopmentNo Comments

You Are Here:, Web DevelopmentComment animer une rotation d’icon simplement en HTML & CSS en 5 min ?

Si tu est actuellement en train de crée un site internet, et que tu débute. Tu dois surement avoir déjà entendu dire qu’il est très important de faire des animations sur son site, car sa donne plus clarté, sa donne de l’esthétique à un site et surtout sa le rend beaucoup plus agréable à l’œil et par conséquent bien plus professionnel. Si tu ne le savais pas, et bien je te le dis avoir quelques animations peut vraiment tout changer. Tu dois également savoir, qu’il est possible de faire des animations pour son site en JavaScript, et que celle du HTML & CSS ne sont pas très propre. Je vais justement de prouver le contraire à l’aide de cet article (et beaucoup d’autre sur le sujet), pour t’apprendre à faire une animation très facilement en HTML & CSS. Ne t’attend pas à une animation magnifique (ma chérie :D), mais juste à une rotation d’icon (sprite, image comme tu veux) lorsque ton curseur survole l’image. Ce n’est pas grand chose, mais je trouve sa plutôt intéressant, surtout que c’est vraiment une des animations les plus simples à réaliser en HTML & CSS !

 

Tout d’abord, si tu veux suivre ce tutoriel il faut que tu ais ou que tu sois en train de coder ton site web, puisque je ne reviendrais pas sur les bases du HTML & CSS, sauf si tu es venu sur cet article uniquement pour te donner bonne conscience sans réaliser le tuto :D. Cependant, même si t’est base sont très fragile, je vais tout de même t’expliquer chaque propriété que je vais utiliser dans cet article ! Tu pourras donc comprendre parfaitement le code même si tu ne te rappelle plus de toutes les propriétés. Tu es justement sur cet article pour apprendre et comprendre. Je tiens aussi à préciser, que les 5 minutes pour faire l’animation c’est un peu faux. En réalité si tu ne prend pas le temps de lire chaque définition de propriété sa devrais juste te prendre le temps de faire un copier-coller. Les min ne concernent que ceux qui lisent entièrement l’article !

 

Comment crée une transition ?

On va directement rentrer dans le vif du sujet, tu vas voir que sa vas vraiment être rapide. Commence donc par trouver une image de ton choix, j’ai personnellement choisis un icon retrouvable dans beaucoup de sites (une petite maison représentant généralement une page d’accueil :D)

 

Tu vas ensuite crée la structure minimal d’une page HTML, et en veillant bien à intégrer ton image (dans laquelle tu mettra une class ou id, un src et un alt).

 

Après avoir fait sa, tu va donc pouvoir réaliser le petit code CSS (ci-dessous) en changeant le nom de la class ou id par rapport à ce que tu a mis dans ton HTML.

Si tu n’as jamais utilisé la transition en CSS, il faut savoir que cet élément permet de modifier facilement les valeurs de propriétés (d’une valeur à une autre) sur une durée donnée.

  • Transition-Duration va te permettre comme son nom l’indique de définir la durée de l’animation, calculé en secondes.
  • Transition-Property permet de renseigner quelle est le type de transition que tu vas effectuer, en l’occurrence ici on fait une transition de type transform.
  • Transform peut s’appliquer aussi bien en 2D que en 3D et va transformer l’élément, dans le code on renseigne rotate pour effectuer une rotation puis le nombre de degré.

 

Ton animation est désormais terminé, cependant si tu ne le savais pas elle ne sera pas compatible avec tous les navigateurs. Il faut pour cela utiliser des préfixes vendeurs afin de forcer la compatibilité entre les navigateurs. A noter également, que Internet Explorer dans ses versions inférieures à 10 ne gère tout simplement pas du tout les transitions, que ce soit sans ou avec son préfixe vendeur. Tu peux voir tous les préfixes et sur quelles navigateurs ils agissent avec l’image ci-dessous.

 

Pour enfin rendre la transition compatible, il te suffit de rajouter les préfixes comme ci-dessous.

 

Tu peux ensuite admirer ton animation (simple) mais pratique, elle peut notamment être utiliser pour afficher des réseaux sociaux dans un menu ou autre.

 

Voilà, tu sais maintenant faire une animation certes très simple mais qui peut rendre très bien si tu rajoute des icons ou réseaux sociaux qui s’affiche lorsque ton curseur passe dessus. Je ferais surement un article la dessus (si ce n’est pas déjà fait), ainsi que pour faire pleins d’autres chose en HTML & CSS (plus-tard autre dans d’autre langage). Dans tout les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune outsider !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top