I have this simple animation made in CSS, but I'm having trouble with " debuggar " behavior. Every time I have to go in the code, save, and refresh in the browser.
Is there any way to test a direct animation through DevTools?
Type has to stop the animation in a given second and evaluate how it is, or see how the element will be in a given second?
.box {
position: absolute;
left: 50%;
width: 400px;
height: 200px;
margin-left: -200px;
overflow: hidden;
background: #333;
}
.bola {
position: absolute;
width: 50px;
height: 50px;
top: 75px;
left: 175px;
background: #999;
border-radius: 50%;
-webkit-animation: bolax 2s ease-in-out infinite;
animation: bolax 2s ease-in-out infinite;
}
.bola:nth-child(2) {
animation-delay: 0.5s;
}
@-webkit-keyframes bolax {
0%, 100% {
-webkit-transform: translateX(-150px);
}
50% {
-webkit-transform: translateX(150px);
}
}
@keyframes bolax {
0%, 100% {
transform: translateX(-150px);
}
50% {
transform: translateX(150px);
}
}
<div class="box">
<div class="bola"></div>
<div class="bola"></div>
</div>