La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.

Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.

WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.

Installation

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes
  5. Instancier WOW.js (après avoir inclus WOW.js

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

  • wow : Signale qu’il faut animer cet élément lors d’un scroll
  • bounce : Le nom de l’animation (toutes les animations ici)

Exemple complet

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.

  • data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
  • data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
  • data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
  • data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS

Exemple

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css

Les animations en CSS semblent être un peu hors du cadre pour les débutants en CSS. La philosophie, la syntaxe, c’est complètement différent du CSS de propriété et valeur qu’on connait tous.

Animation en CSS3

Avec les animations en CSS, il faut commencer d’abord par définir les règles Keyframes, qui sont autrement dit, les phases de transitions que votre animation va devoir passer

Et c’est après la définition du keyframes que l’habitude du CSS ordinaire se reprenne. Les propriétés et valeurs.

Tester ce code

Se répéter dans le but d’apprentissage n’est pas mauvais mais dans un cadre professionnel n’est vraiment pas évident si ce n’est nécessaire.

Animate.css

Découvrez avec moi dans cet article animate.css, une petite librairie CSS qui regroupe plusieurs animations utilisable facilement avec l’appelle des classes CSS prédéfinies !

Installation

Tous ce que vous avez à faire c’est d’inclure le fichier animate.css dans le head de votre document HTML et le tour est joué.

Utilisation

L’utilisation est simple. Tous vos éléments ou balises HTML à animer doivent avoir deux classes.

  1. animated
  2. Le nom de l’animation que vous voulez utiliser, à retrouver dans ce lien

Exemple

Tester ce code

Listes de nom des animations