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

Animations CSS et animations JavaScript

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

Paul Lewis

Sam Thorogood

Il existe deux méthodes principales pour créer des animations sur le Web: avec CSS et avec JavaScript. Le choix 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é

Utiliser des animations CSS pour simplifier la prise de vue unique des transitions, comme l'activation ou la désactivation des états des éléments d'interface utilisateur.
Utilisez les animations JavaScript lorsque vous souhaitez appliquer des effets avancés tels que le rebondissement, l'arrêt, la mise en pause, le retour arrière ou le ralentissement.
Si vous choisissez d'effectuer l'animation 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 en CSS ou en JavaScript, mais le temps et les efforts nécessaires sont différents (voir aussi Performances de CSS et JavaScript). Chacune a ses avantages et ses inconvénients, mais voici quelques bonnes pratiques:

Utilisez le code 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 seront elles-mêmes dans votre CSS.
Utilisez JavaScript lorsque vous avez besoin d'exercer un contrôle important sur vos animations. L'API Web Animations est une approche normalisée actuellement disponible dans la plupart des navigateurs récents. Cela fournit des objets réels, ce qui est idéal pour les applications complexes orientées objet. JavaScript est également utile lorsque vous devez arrêter, mettre en pause, ralentir ou inverser vos animations.
Utilisez requestAnimationFrame directement 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, par exemple via la méthode .animate() de jQuery ou TweenMax de GreenSock, il peut être plus pratique de vous en tenir globalement à cette méthode pour vos animations.

Créer des animations avec CSS

Les animations en CSS sont 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 l'action à effectuer.

Vous trouverez ci-dessous un exemple de code CSS permettant de déplacer un élément 100px sur les axes X et Y. Pour ce faire, utilisez une transition CSS définie 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 à la sensation 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 ensuite utiliser JavaScript pour activer et désactiver chaque animation:

box.classList.add('move');

Cela offre un équilibre parfait pour 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, ce qui laisse le navigateur gérer les animations. En suivant cette procédure, vous pouvez écouter les événements transitionend sur l'élément, mais seulement si vous pouvez renoncer à prendre en charge les anciennes versions d'Internet Explorer. la version 10 a été la première à prendre en charge ces événements. Tous les autres navigateurs sont compatibles avec 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 sans aucune 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 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 offre 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 façon 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 conserver votre objet à 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

Web Animations API est une norme relativement nouvelle du W3C. Il est pris en charge de manière native dans la plupart des navigateurs récents. Pour les navigateurs récents non compatibles, un polyfill est disponible.

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.