Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

CSS et les animations d’éléments

Tous ceux et celles qui ont développé en HTML, CSS, JS il y a 10 à 20 savent à quel point le CSS peut être frustrant pour un débutant. En effet, d’un navigateur à l’autre avec le même code, on arrivait à 2 résultats complètement différents. Encore aujourd’hui, le CSS est grandement utilisé sur le web, ce qui nous permet grâce à sa troisième mouture de créer des applications fluides et… coquettes!

Avant de commencer, je considère ici que le lecteur a une base de CSS. Par exemple, vous savez comment les sélecteurs fonctionnent.

Un peu d’histoire sur CSS

Premièrement, CSS signifie Cascading Style Sheets. Ce langage qui soufflera sa 21e bougie ce 17 décembre permet de définir ce à quoi un document structuré de présentation devrait ressembler (comme un document HTML). Puis, ce code est intégré à un document, et un processeur comme Blink (Chromium) ou EdgeHTML (MS Edge) va générer visuellement le document formaté.

Aujourd’hui, CSS est régit par des standards qui permettent de faciliter la vie aux développeurs. En effet, il n’était par rare il y a quelques années de voir du code pour IE, du code pour Opera, etc..

Un bouton!

Voici le code d’un bouton. On va partir d’ici le styliser et l’animer juste un peu.

Rien de bien sorcier! Le voici:

Ensuite, on peut le styliser, disons avec ce code CSS:

Donc ici, on ajoute une bordure, une trame de fond et un peu d’espacement entre la bordure et le texte du bouton afin de se donner un peu d’espace. Voici notre bouton:

Puis, afin qu’on ait un feedback visuel sur le bouton, on pourrait décider de changer sa couleur lorsqu’on passe par dessus avec la souris. Ceci est fait avec le sélecteur :hover  qu’on ajoute à notre bouton comme ceci:

Donc ici, notre bouton changera de couleur pour le vert lorsqu’on passe la souris par dessus.

Comme vous pouvez voir avec ce dernier bouton, le changement de couleur se fait d’un coup ce qui est assez agressant pour l’utilisateur. Ensuite, pour rendre tout ça fluide, nous allons utiliser les transitions CSS. En effet, CSS nous offre une propriété pour effectuer une transition graduelle des styles qui s’appelle transition [property] [timing-function] [animation-length] (duh!). Par contre, cette transition est un shorthand aux propriétés suivantes:

  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Puis, pour rendre notre bouton plus fluide, voici comment faire tout ça simplement:

Le résultat:

Finalement, le résultat est beaucoup plus fluide 🙂

Conclusion

Ajourd’hui, CSS permet de faire des animations simples comme on vient de le voir. Auparavant, ces animations devaient être faites en JavaScript avec des boucles et des timers. Grâce à ça, les applications sont désormais beaucoup plus fluides, puisque l’animation est exécutée par le navigateur dans son langage compilé au lieu d’être interprété par l’interpréteur JS.

Lors du prochain article, je vais vous montrer comment faire de véritables animations complexes entièrement personnalisées. En attendant, profitez-en pour aimer notre page Facebook ou relire cet article sur les 6 trucs pour devenir un meilleur développeur!

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 12 autres abonnés