As animações são uma adição poderosa ao CSS, mas seu formato de texto pode dificultar o trabalho com elas. DevTools do Chrome para o resgate!

Animações CSS, feitas corretamente, podem elevar seu site a outro nível. Mas criar essas animações pode ser complicado sem ferramentas que forneçam controle preciso sobre elas. E se houvesse uma maneira de ver exatamente o que está acontecendo em cada etapa da sua animação?

O recurso DevTools do Google Chrome e do Firefox vem com a capacidade de inspecionar suas animações. Aprenda como usar esse recurso para melhorar suas próprias animações e fazer engenharia reversa de suas animações favoritas na web.

O DevTools do Chrome é uma ótima maneira de depurar todos os aspectos do seu CSSe muito mais. Comece com este exemplo simples para entender como você pode usá-lo para inspecionar animações.

O código para esses exemplos está disponível em um repositório GitHub.

Defina animações com HTML e CSS

O HTML a seguir renderiza uma página com dois elementos: um e um. A página também importa um arquivo CSS chamado estilo.css:

html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<linkrel="stylesheet"href="style.css">
head>
<body>
<divid="box">div>
<button>Test Buttonbutton>
body>
html>

Para estilizar ambos os elementos, crie um estilo.css arquivo na mesma pasta do HTML e adicione o seguinte:

#box {
background: red;
height: 400px;
width: 400px;
margin-bottom: 1rem;
animation: rotateAndChangeColor 1000msease-in-out;
}
button {
font-size: larger;
background-color: white;
border: 1pxsolidblack;
padding: 0.5em 1em;
color: black;
height: 80px;
width: 300px;
border-radius: 0.5em;
transition: background-color 100msease-in-out, color 100msease-in-out;
cursor: pointer;
}


button:hover {
background-color: black;
color: white;
}


@keyframes rotateAndChangeColor {
 0% {
rotate: 0deg;
background: red;
 }
 10% {
background: green;
 }
 40% {
background: blue;
 }
 70% {
background: yellow;
 }
 100% {
rotate: 360deg;
background: red;
 }
}

Esses estilos criam dois componentes:

  • Uma caixa simples que gira e muda de cor quando a página carrega.
  • Um botão que muda a cor de fundo quando você passa o mouse sobre ele.

Observe que a caixa vermelha é animada usando o Diretiva CSS @keyframe, enquanto o botão usa uma transição. Isso permite comparar as duas abordagens usando o DevTools do navegador.

Para acessar o Animações guia no Chrome DevTools:

  1. Clique com o botão direito na sua página para abrir o menu de contexto.
  2. Clique Inspecionar.
  3. Clique nos pontos triplos no canto superior direito.
  4. Navegar para Mais ferramentas > Animações.

Isso abrirá a gaveta de animação na seção inferior.

Todas as animações que ocorrerem na sua página aparecerão aqui. Se você atualizar sua página e passar o mouse sobre o botão, as animações aparecerão na guia de animações.

O verdadeiro poder surge quando você clica em uma dessas animações. Por exemplo, se você clicar na animação da caixa, verá que o navegador apresenta os quadros-chave da seguinte forma:

O DevTools exibe todas as animações relacionadas ao elemento selecionado. Como há apenas uma animação definida para a caixa vermelha—girarAndChangeColor- você apenas verá seus detalhes.

Você pode arrastar a linha para a esquerda para tornar a animação muito mais rápida ou arrastá-la para a direita para desacelerar a animação. Você também pode pausar a animação em determinados pontos, alternando os ícones de pausa e reprodução. As porcentagens na parte superior permitem reproduzir a animação em um quarto de sua velocidade normal e um décimo de sua velocidade, respectivamente.

Ao inspecionar a transição do botão, o DevTools mostrará as propriedades individuais da transição: a cor e a cor de fundo.

Esta ferramenta permite manipular sua animação para ver exatamente como ela está funcionando. Você pode usá-lo para solucionar problemas do seu site se houver algum problema.

Exemplos de animação avançada

Comece substituindo a marcação em seu HTML tag com a seguinte marcação:


class="move-me move-me-1">steps(4, end)</div>
<br />

class="move-me move-me-2">steps(4, start)</div>
<br />

class="move-me move-me-3">no steps</div>

Em seguida, substitua todos os estilos no seu estilo.css arquivo com isto:

.move-me {
display: inline-block; 
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8ssteps(4, end) infinite;
}


.move-me-2 {
animation: move-in-steps 8ssteps(4, start) infinite;
}


.move-me-3 {
animation: move-in-steps 8sinfinite;
}


body {
padding: 20px;
}


@keyframes move-in-steps {
 0% {
left: 0;
background: blue;
 }
 100% {
left: 100%;
background: red;
 }
}

Todos elementos têm o passo a passo animação aplicada a eles, que faz a transição da posição e da cor de fundo. Além disso, cada caixa possui uma animação diferente para controlar a quantidade de passos que irá realizar.

Enquanto a terceira caixa desliza continuamente para a direita, as duas primeiras se moverão dois passos de cada vez até chegarem ao final da tela (com a segunda caixa começando antes da primeira).

Se você abrir o Animações guia no DevTools e atualize a página, você encontrará todas as informações relacionadas a estas animações:

Existem vários elementos que são animados no mesmo período. Neste cenário, a cor de fundo e a posição da caixa são animadas ao mesmo tempo para todas as três caixas.

Outra coisa a notar são os nós em cada linha de animação. Quando uma animação ocorre um número infinito de vezes, os nós mostram onde cada repetição começa e termina na animação.

Os nós vazios são essencialmente os quadros-chave da sua animação, enquanto os nós sólidos e coloridos representam o início e o fim da animação. Você terá nós de cor escura sempre que sua animação for reiniciada.

Finalmente, você pode editar as animações usando o DevTools, assim como faria com qualquer propriedade CSS. Todas as alterações feitas usando a interface de animação aparecerão nos estilos embutidos sob o Estilos guia e vice-versa. Isso permite fazer alterações, testá-las e copiá-las para o seu projeto real.

O recurso DevTools do Google Chrome é uma ferramenta incrível para depurar seu CSS, incluindo animações. Ele fornece uma visão detalhada de cada transição e animação da sua página, para que você possa ver exatamente o que está acontecendo em cada etapa.

Como desenvolvedor web, você deve estar familiarizado com a função DevTools do seu navegador ou equivalente.