Animations CSS et animations JavaScript

Vous pouvez créer des animations à l'aide de CSS ou de JavaScript. Quelle solution devez-vous utiliser et pourquoi ?

Paul Lewis

Sam Thorogood

Il existe deux principales façons de créer des animations sur le Web : avec CSS et avec JavaScript. Le choix dépend vraiment des autres dépendances de votre projet et des types d'effets que vous essayez d'obtenir.

Résumé

• Utilisez des animations CSS pour des transitions "à usage unique" plus simples, comme l'activation/la désactivation des états des éléments d'interface utilisateur.
• Utilisez des animations JavaScript lorsque vous souhaitez obtenir des effets avancés tels que le rebond, l'arrêt, la mise en pause, le retour en arrière ou le ralenti.
• Si vous choisissez d'animer avec JavaScript, utilisez l'API Web Animations ou un framework moderne avec lequel vous êtes à l'aise.

La plupart des animations de base peuvent être créées avec CSS ou JavaScript, mais l'effort et le temps nécessaires diffèrent (voir également Performances CSS et JavaScript). Chacune a ses avantages et ses inconvénients, mais voici quelques bonnes pratiques:

• Utilisez le CSS lorsque vous avez des états plus petits et autonomes pour les éléments d'interface utilisateur. Les animations et les transitions CSS sont idéales pour afficher un menu de navigation sur le côté ou afficher une info-bulle. Vous finirez peut-être par utiliser JavaScript pour contrôler les états, mais les animations elles-mêmes se trouveront dans votre CSS.
• Utilisez JavaScript lorsque vous avez besoin de contrôler de manière significative vos animations. L'API Web Animations est une approche basée sur les normes, disponible aujourd'hui dans la plupart des navigateurs modernes. Cela fournit des objets réels, idéaux pour les applications orientées objet complexes. JavaScript est également utile lorsque vous devez arrêter, mettre en pause, ralentir ou inverser vos animations.
• Utilisez directement requestAnimationFrame lorsque vous souhaitez orchestrer manuellement une scène entière. Il s'agit d'une approche JavaScript avancée, mais elle peut être utile si vous créez un jeu ou dessinez sur un canevas HTML.

Si vous utilisez déjà un framework JavaScript qui inclut des fonctionnalités d'animation, par exemple via la méthode .animate() de jQuery ou TweenMax de GreenSock, vous trouverez peut-être plus pratique de vous en tenir à celui-ci pour vos animations.

Animer avec CSS

L'animation avec CSS est le moyen le plus simple de faire bouger un élément à l'écran. Cette approche est décrite comme déclarative, car vous spécifiez ce que vous souhaitez qu'il se passe.

Vous trouverez ci-dessous du code CSS qui déplace un élément 100px sur les axes X et Y. Pour ce faire, utilisez une transition CSS définie sur 500ms. Lorsque la classe move est ajoutée, la valeur transform est modifiée et la transition commence.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Essayer

En plus de la durée de la transition, il existe des options pour le lissage de vitesse, qui correspond essentiellement à la sensation de l'animation. Pour en savoir plus sur les effets d'adoucissement, consultez le guide Principes de base des effets d'adoucissement.

Si, comme dans l'extrait ci-dessus, vous créez des classes CSS distinctes pour gérer vos animations, vous pouvez ensuite utiliser JavaScript pour activer et désactiver chaque animation:

box.classList.add('move');

Cela permet d'équilibrer vos applications. Vous pouvez vous concentrer sur la gestion de l'état avec JavaScript et simplement définir les classes appropriées sur les éléments cibles, laissant le navigateur gérer les animations. Si vous choisissez cette option, vous pouvez écouter les événements transitionend sur l'élément, mais uniquement si vous pouvez renoncer à la prise en charge des anciennes versions d'Internet Explorer. La version 10 est la première à prendre en charge ces événements. Tous les autres navigateurs sont compatibles avec cet événement depuis un certain temps.

Le code JavaScript requis pour écouter la fin d'une transition se présente comme suit :

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

En plus d'utiliser des transitions CSS, vous pouvez également utiliser des animations CSS, qui vous permettent de contrôler beaucoup plus les images clés, les durées et les itérations d'animation individuelles.

Remarque : Si vous débutez dans les animations, les clés-images sont un ancien terme issu des animations dessinées à la main. Les animateurs créaient des images spécifiques pour une action, appelées images clés, qui capturaient des éléments tels que la partie la plus extrême d'un mouvement, puis ils se mettaient à dessiner toutes les images individuelles entre les images clés. Aujourd'hui, le même processus s'applique aux animations CSS : nous indiquons au navigateur les valeurs que les propriétés CSS doivent avoir à certains points, et elle comble les lacunes.

Vous pouvez, par exemple, animer la boîte de la même manière avec des transitions, mais sans aucune interaction utilisateur (clic, par exemple) et avec des répétitions infinies. Vous pouvez également modifier plusieurs propriétés en même temps.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Essayer

Avec les animations CSS, vous définissez l'animation elle-même indépendamment de l'élément cible, et utilisez la propriété animation-name pour choisir l'animation requise.

Si vous souhaitez que vos animations CSS fonctionnent sur des navigateurs plus anciens, vous devez ajouter des préfixes de fournisseur. De nombreux outils peuvent vous aider à créer les versions avec préfixe du CSS dont vous avez besoin, ce qui vous permet d'écrire la version sans préfixe dans vos fichiers sources.

Animer avec JavaScript et l'API Web Animations

Par comparaison, créer des animations avec JavaScript est plus complexe que d'écrire des transitions ou des animations CSS, mais cela offre généralement aux développeurs une puissance bien plus importante. Vous pouvez utiliser l'API Web Animations pour animer des propriétés CSS spécifiques ou créer des objets d'effets composables.

Les animations JavaScript sont impératives, car vous les écrivez en ligne dans votre code. Vous pouvez également les encapsuler dans d'autres objets. Vous trouverez ci-dessous le code JavaScript que vous devez écrire pour recréer la transition CSS décrite précédemment :

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Par défaut, les animations Web ne modifient que la présentation d'un élément. Si vous souhaitez que votre objet reste à l'emplacement où il a été déplacé, vous devez modifier ses styles sous-jacents une fois l'animation terminée, comme dans notre exemple.

Essayer

L'API Web Animations est une norme relativement récente du W3C. Il est compatible de façon native avec la plupart des navigateurs modernes. Pour les navigateurs modernes non compatibles, un polyfill est disponible.

Avec les animations JavaScript, vous contrôlez totalement les styles d'un élément à chaque étape. Vous pouvez ainsi ralentir les animations, les mettre en pause, les arrêter, les inverser et manipuler les éléments comme vous le souhaitez. Cela est particulièrement utile si vous créez des applications complexes orientées objet, car vous pouvez encapsuler correctement votre comportement.