web-dev-qa-db-fra.com

Déboguer une animation CSS avec Chrome Devtools

Est-il possible d'afficher ou de déboguer les étapes qu'un seul élément prend dans une animation transition-css? Je travaille avec Chrome Dev Tools, mais je suis assez novice. Je l'ai googlé et vu quelque chose de la chronologie, mais je ne trouve pas les choses étape par étape. 

Mon animation commence à 0% et va à 100%, mais il semble y avoir quelque chose d'étrange autour de 50%, bien que l'étape de 50% ne soit pas déclarée. C'est pourquoi j'aimerais voir ce qui se passe.

cssgoogle-chromedebugginggoogle-chrome-devtoolstransitions
20
FredVDH

Oui c'est possible.

Il est possible de déboguer des transitions et des animations CSS avec Chrome DevTools. Cliquez simplement sur ce bouton:

Image describing the location of the "Animations" tab activation button

Ensuite, un onglet "Animations" s'ouvrira dans le panneau de la console (vous pouvez l'ouvrir en appuyant sur Esc si vous avez orienté DevTools - il suffit de cliquer sur DevTools pour le focaliser):

enter image description here

23
user3638471

Après quelques recherches, il semble que ce ne soit pas possible avec Chrome DevTools. Voici quelques informations aléatoires que j'ai trouvées:

Voici ce que vous devriez faire, mais je ne les ai pas encore testées et je ne connais pas le sujet:

  • Si possible, mettre en pause l'animation en modifiant la propriété animation-play-state de l'élément:

    .paused {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

  • Faites glisser l'animation sur une période plus longue afin que le comportement de la transition soit plus clair.

  • Il est également possible d’utiliser des animations <canvas> (pour lesquelles Chrome DevTools a apparemment une meilleure prise en charge du débogage) s’il est essentiel de faire des choses comme parcourir l’animation.

7
alex

Téléchargez Chrome Canary pour accéder à la nouvelle fonctionnalité de contrôle des animations . Regardez cette vidéo pour un aperçu de son fonctionnement:

https://vimeo.com/116038639

2
ylerjen

Dernière mise à jour le 11 janvier 2018.

L'inspecteur d'animation Chrome DevTools a deux objectifs principaux.

  1. Inspection d'animations. Vous souhaitez ralentir, rejouer ou inspecter le code source .__ pour un groupe d'animation.
  2. Modification des animations. Vous souhaitez modifier le minutage, le délai, la durée .__ ou les décalages d'image clé d'un groupe d'animation. Bezier-Editing

Par exemple Il n'est pas possible de modifier la valeur de la méthode scale de la transformation 2D en CSS dans une image clé. Essayez d’exécuter l’extrait donné ci-dessous: 

.animates {
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.wrapper {
  position: relative;
  margin-top: 10px;
}
.btn-overlay {
  animation-name:grow;
  -webkit-animation-name:grow;
  position: absolute;
  width: 50%;
  top: 0;
  left: 27%;
}
@keyframes grow {
  0%{
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  }
  80% {
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    left: 27%;
  }	
  90% {
    transform: scale(1.04);
    -moz-transform: scale(1.04);
    -webkit-transform: scale(1.04);	
    left: 27.5%;
  }
  100%{
    transform: scale(1.0);
    -moz-transform: scale(1.0);
    -webkit-transform: scale(1.0);	
    left: 27%;
  }	
}
.button{
  background-color: #f49a22!important;/* Old browsers */
  background: -moz-linear-gradient(left, #efaf00 0%, #dd5c00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #efaf00 0%,#dd5c00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #efaf00 0%,#dd5c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaf00', endColorstr='#dd5c00',GradientType=1 ); /* IE6-9 */

  box-shadow: 0px 3px 6px rgba(156, 116, 86, 0.4);
  display: inline-block;
  color: white;
  padding: 0 14px;
  height: 30px;
  border-radius: 80px!important;
  font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="wrapper">
  <div class="animates btn-overlay">
    <input type="submit" value="SIGN UP HERE!" name="subscribe" class="button">
  </div>
</div>

</body>
</html>

L'animateur d'animation prend en charge les animations CSS, les transitions CSS et les animations Web. Les animations requestAnimationFrame ne sont actuellement pas prises en charge.

0
kolunar