Menu
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):
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 :
https://vimeo.com/116038639
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With