Cette page a été traduite par l'API Cloud Translation.

Animations CSS et animations JavaScript

Vous pouvez créer des animations en CSS ou en JavaScript. Que devriez-vous utiliser et pourquoi ?

Paul Lewis

Sam Thorogood

Il existe deux façons principales de créer des animations sur le Web: avec CSS et avec JavaScript. Laquelle que vous choisissez 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 "one-shot" plus simples, comme le changement d'état des éléments d'interface utilisateur.
Utilisez des animations JavaScript pour obtenir des effets avancés comme le rebond, l'arrêt, la mise en pause, le retour arrière ou le ralentissement.
Si vous choisissez d'utiliser JavaScript, utilisez l'API Web Animations ou un framework moderne avec lequel vous maîtrisez.

La plupart des animations de base peuvent être créées avec CSS ou JavaScript, mais le temps et les efforts nécessaires varient (voir également l'article Performances CSS et JavaScript). Chacune a ses avantages et ses inconvénients, mais voici quelques consignes utiles:

Utilisez le code CSS lorsque vous avez des états plus petits et autonomes pour les éléments d'interface utilisateur. Les animations et transitions CSS sont idéales pour afficher un menu de navigation sur le côté ou une info-bulle. Vous finirez peut-être par utiliser JavaScript pour contrôler les états, mais les animations elles-mêmes seront dans votre CSS.
Utilisez JavaScript lorsque vous avez besoin d'un contrôle important sur vos animations. L'API Web Animations est une approche normalisée, disponible aujourd'hui dans la plupart des navigateurs récents. Cela permet de fournir des objets réels, ce qui est idéal pour les applications orientées objets 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 toute une scène à la main. 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, comme via la méthode .animate() de jQuery ou le TweenMax de GreenSock, il peut être plus pratique de s'en tenir à vos animations.

Créer des animations en CSS

L'animation en 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 obtenir.

Vous trouverez ci-dessous des exemples de code CSS permettant de déplacer un élément 100px sur les axes X et Y. Pour ce faire, utilisez une transition CSS configurée pour accepter 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 au rendu de l'animation. Pour en savoir plus sur le lissage de vitesse, consultez le guide Principes de base du lissage de vitesse.

Si, comme dans l'extrait ci-dessus, vous créez des classes CSS distinctes pour gérer vos animations, vous pouvez activer et désactiver chacune d'elles à l'aide de JavaScript:

box.classList.add('move');

Cela offre un bon équilibre à 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, en laissant le navigateur gérer les animations. Si vous empruntez cette méthode, vous pouvez écouter les événements transitionend sur l'élément, mais uniquement si vous renoncez à la compatibilité avec d'anciennes versions d'Internet Explorer. La version 10 a été la première version à prendre en charge ces événements. Tous les autres navigateurs prennent en charge l'é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 des transitions CSS, vous pouvez utiliser des animations CSS, qui vous permettent de mieux contrôler les images clés, les durées et les itérations de chaque animation.

Vous pouvez, par exemple, animer la zone de la même manière avec des transitions, mais l'animer sans interaction de l'utilisateur (comme un clic) et avec des répétitions infinies. Vous pouvez également modifier plusieurs propriétés à la fois.

.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 le préfixe du CSS dont vous avez besoin, ce qui vous permet d'écrire la version sans préfixe dans vos fichiers sources.

Créer des animations avec JavaScript et l'API Web Animations

En comparaison, la création d'animations avec JavaScript est plus complexe que l'écriture de transitions ou d'animations CSS, mais elle fournit généralement aux développeurs beaucoup plus de puissance. Vous pouvez utiliser l'API Web Animations pour animer des propriétés CSS spécifiques ou créer des objets d'effet composables.

Les animations JavaScript sont impératives, car vous les écrivez de manière intégrée 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 l'objet reste à l'emplacement où il a été déplacé, vous devez modifier les styles sous-jacents une fois l'animation terminée, comme indiqué dans notre exemple.

Essayer

L'API Web Animations est une norme relativement nouvelle du W3C. Elle est prise en charge de façon native dans la plupart des navigateurs récents. Un polyfill est disponible pour les navigateurs récents non compatibles.

Avec les animations JavaScript, vous contrôlez totalement les styles d'un élément à chaque étape. Cela signifie que vous pouvez 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.