Debug CSS animation with Chrome Devtools

Question

Is it possible to view or debug the steps a single element takes when in a transition-css animation? I'm working with Chrome Dev Tools, but I'm pretty new at it. I googled it and saw something from the timeline, but I don't find the step by step things.

My animation starts at 0%, and goes to 100%, but there seems to be something strange around 50%, although the 50% step is not declared. That's why I would like to view what's going on.

Answer 1

Yes it's possible.

It is possible to debug transitions and CSS animations with Chrome DevTools. Just click this button:

Then, an "Animations" tab will open in the Console panel (you can open it by pressing Esc if you have DevTools focused - just click on DevTools to focus it):

Answer 2

After doing a little bit of research, it doesn't look like this is currently possible using Chrome DevTools. Here are some random tidbits of information I've found:

• As of March 2013, no such feature existed in Firefox's DevTools, although Mozilla developers have acknowledged having received requests for this.
• As of November 2013, Chrome DevTools doesn't have the tools to debug the rendering of CSS animations.
• Chrome DevTools does have support for stepping through HTML5 canvas animations.
• It's not possible to step through the animation's transition using Javascript, as "the internals of the transition [aren't] exposed for Javascript".
• Last but not least - there's nothing immediately apparent to me in the DevTools API that indicates that there's support for debugging CSS animations.

For what it's worth, here's a few suggestions, although I've not tested these and I'm fairly ignorant about the topic:

• If possible, pause the animation by way of altering the element's animation-play-state property:

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

• Drag the animation out over a longer span of time so that the transition behavior is more clear.

• There's also the option of using <canvas> animations (which apparently Chrome DevTools has better debugging support for) if it's mission critical to do things like step through the animation.

Answer 3

Download Chrome Canary to have access to the new animation controls feature. See this video to preview how it works :

https://vimeo.com/116038639

Answer 4

Last updated January 11, 2018.

The Chrome DevTools Animation Inspector has two main purposes.

1. Inspecting animations. You want to slow down, replay, or inspect the source code for an animation group.
2. Modifying animations. You want to modify the timing, delay, duration, or keyframe offsets of an animation group. Bezier editing and keyframe editing are currently not supported.

For e.g. It is not possible to modify the value of CSS 2D transforms' scale method in keyframe. Try running the snippet given below:

.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>

The Animation Inspector supports CSS animations, CSS transitions, and web animations. requestAnimationFrame animations are currently not supported.