Conseils concernant les outils de développement: inspecter et modifier les animations CSS

Sofia Emelianova
Sofia Emelianova

L'onglet Animations des outils pour les développeurs Chrome est un outil performant qui vous permet de ralentir la lecture, de la relancer, d'ajuster la chronologie des animations CSS et d'afficher les résultats immédiatement.

L'onglet Animations, lorsqu'il est ouvert, enregistre automatiquement les animations, les regroupe et vous permet de:

  • Relancez et ralentissez les animations pour mieux les inspecter.
  • Ajustez les durées, les codes temporels et les délais en faisant glisser des points dans une chronologie au lieu de les deviner et de définir les valeurs CSS manuellement.

Vous pouvez également modifier les temps de lissage de vitesse et définir des valeurs de courbe cubic-bezier personnalisées à l'aide de l'éditeur de lissage de vitesse dans le volet Éléments > Styles. Pour en savoir plus, consultez Modifier les codes temporels des animations et des transitions avec l'éditeur de lissage de vitesse.

Pour approfondir l'apprentissage, suivez le guide Inspecter et modifier les effets d'animation CSS.