Tenho essa animação simples feita em CSS, porém estou tendo dificuldades para "debuggar" seu comportamento. Toda hora tenho que ir no código, salvar, e atualizar no browser.
Existe alguma forma de testar uma animação direto pelo DevTools?
Tipo tem como parar a animação em determinado segundo e avaliar como ela está, ou ver como o elemento vai estar em determinado segundo?
.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>