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.
It is possible to debug transitions and CSS animations with Chrome DevTools.
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):
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:
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.
Download Chrome Canary to have access to the new animation controls feature. See this video to preview how it works :
Last updated January 11, 2018.
The Chrome DevTools Animation Inspector has two main purposes.
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.
if you build a man a fire, he'll be warm for a night. set a man on fire, and he'll be warm for the rest of his life.The point is, if we can point out the 'mistake' now, you'll be less likely to have the error in the future! :)