. A página também importa um arquivo CSS chamado style.css:
<!DOCTYPE html>
Para estilizar ambos os elementos, crie um arquivo style.css na mesma pasta do HTML e adicione o seguinte:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
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 a diretiva CSS @keyframe, enquanto o botão usa uma transição. Isso permite comparar as duas abordagens usando o DevTools do navegador.
Para acessar a guia Animações no Chrome DevTools:
Clique com o botão direito na sua página para abrir o menu de contexto.
Clique em Inspecionar.
Clique nos pontos triplos no canto superior direito.
Navegue até 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 – rotateAndChangeColor – você verá apenas 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.
Comece substituindo a marcação em sua tag HTML
pela seguinte marcação:
<div class="move-me move-me-1">steps(4, end)</div>
Em seguida, substitua todos os estilos em seu arquivo style.css por isto:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Todos os elementos
têm a animação de movimento em etapas 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 a guia Animações no DevTools e atualizar a página, 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 na guia Estilos 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.
