Skip to content

Aide-mémoire des bibliothèques d'animation Web

Bibliothèques d’animation JavaScript

GSAP

Bibliothèque d’animation haute performance leader du secteur, prenant en charge les propriétés CSS, SVG, Canvas, etc., s’intégrant parfaitement aux frameworks tels que React et Vue.

  • Caractéristiques : Haute performance, facile à utiliser, puissante, prise en charge des timelines

  • Installation : npm install gsap

  • Utilisation :

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

Bibliothèque d’animation JavaScript légère, prenant en charge les propriétés CSS, SVG, les propriétés DOM et l’animation d’objets JavaScript.

  • Caractéristiques : Simple à utiliser, légère, prise en charge de plusieurs types d’animation

  • Installation : npm install animejs

  • Utilisation :

    import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

Combine la facilité d’utilisation de jQuery avec les hautes performances du CSS, prenant en charge les files d’attente d’animation et les éléments contextuels.

  • Caractéristiques : Files d’attente d’animation, éléments contextuels, facile à utiliser

  • Installation : npm install velocity-animate

  • Utilisation :

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

Bibliothèques d’animation CSS

Animate.css

Une bibliothèque d’animation CSS riche en effets, réalisables simplement en ajoutant des noms de classes.

  • Caractéristiques : Richesse des effets d’animation, utilisation simple, bonne compatibilité

  • Installation : npm install animate.css --save

  • Utilisation :

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

Une bibliothèque d’effets de survol de boutons implémentée uniquement avec CSS3, contenant une variété d’effets de survol.

  • Caractéristiques : Variété d’effets, implémentée uniquement avec CSS3, facile à utiliser

  • Installation : npm install hover.css

  • Utilisation :

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

Un ensemble de classes d’animation CSS3 pour créer des effets de secousse, d’oscillation, etc.

  • Caractéristiques : Effets d’animation uniques, implémentée uniquement en CSS3, facile à utiliser

  • Installation : npm install csshake

  • Utilisation :

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>