Animações: inspecionar e modificar efeitos de animação CSS

Kayce Basques

Sofia Emelianova

Inspecione e modifique animações com a guia da gaveta Animations do Chrome DevTools.

Visão geral

Para capturar animações, abra o painel Animações. Ele detecta animações e as classifica em grupos automaticamente.

O painel Animações tem dois propósitos principais:

• Inspecione animações. Desacelere, reproduza ou inspecione o código-fonte de um grupo de animações.
• Modificar animações. Modificar o tempo, o atraso, a duração ou os deslocamentos de frames-chave de uma grupo de animações. A edição de frames-chave e Bézier não é suportada.

Importante:é possível editar os tempos da transição de CSS e dos easings de animação e configurar curvas de Bézier personalizadas com o Editor de easing em Elementos > Painel Estilos.

O painel Animações oferece suporte a animações CSS, transições CSS, animações da Web e a API View Transitions. Ainda não há suporte para animações requestAnimationFrame.

O que é um grupo de animações?

Um grupo de animações é um conjunto de animações que parecem estar relacionadas.

Por enquanto, a Web não tem um conceito real de animação em grupo. Por isso, os motion designers e desenvolvedores criam e cronometram animações individuais para aparecerem como um efeito visual coerente. O painel Animações prevê animações relacionadas com base no horário de início (excluindo atrasos) e as agrupa lado a lado.

Em outras palavras, o painel Animações agrupa animações acionadas no mesmo bloco de script, mas, se forem assíncronas, elas vão acabar em grupos diferentes.

Abrir o painel "Animações"

Há duas maneiras de abrir o painel Animações:

• Selecione Personalizar e controlar DevTools > Mais ferramentas > Animações.

• Para abrir o menu de comando, pressione uma das seguintes opções:

  • No macOS: Command+Shift+P
  • No Windows, Linux ou ChromeOS: Control+Shift+P

  Em seguida, comece a digitar Show Animations e selecione o painel correspondente da gaveta.

Por padrão, o painel Animações é aberto como uma guia ao lado da gaveta Console. Como uma guia de gaveta, ela pode ser usada com qualquer painel ou movida para a parte de cima do DevTools.

O painel Animações captura automaticamente as animações em andamento quando você o abre. Se uma animação for acionada ao carregar a página ou já tiver sido interrompida, atualize a página com o painel aberto.

Conhecer a interface do painel "Animações"

O painel Animations tem quatro seções principais:

1. Controles. Aqui, você pode bloquear Limpar tudo os grupos de animação capturados, pausar pausar ou play_arrow continuar animações ou mudar a velocidade do grupo de animação selecionado.

2. Visão geral. Mostra grupos de animação capturados de dois tipos marcados com ícones: rolagem do mouse e programação (regular, com base no tempo).

   Selecione um grupo de animação aqui para inspecionar e modificar no painel Details.

3. Linha do tempo. Dependendo do tipo de grupo de animação, a linha do tempo pode ser:

   • Em pixels para animações movidas por rolagem do mouse.
   • Em milissegundos para animações baseadas em tempo programadas.

   Na linha do tempo, é possível reproduzir novamente uma animação repetir, arrastá-la ou pular para um ponto específico.

4. (mais detalhes); Inspecione e modifique o grupo de animações selecionado.

Para capturar uma animação, acione-a enquanto o painel Animações está aberto.

Inspecionar animações

Depois de capturar uma animação, há algumas formas de reproduzi-la:

• Passe o cursor sobre a miniatura no painel Visão geral para acessar uma prévia da imagem.
• Arraste o marcador (barra vertical vermelha) para acessar a animação da janela de visualização ou clique em qualquer lugar da Linha do tempo para defini-lo em um ponto específico. A animação continuará a ser exibida se já estiver em reprodução e será interrompida de outra forma.
• Selecione o grupo de animação no painel Overview para que ele seja exibido no painel Details e pressione o botão Replay. A animação é reproduzida na janela de visualização.

Clique nos botões Velocidade da animação na barra Controles para mudar a velocidade de visualização do grupo de animações selecionado.

Mais detalhes da animação

Depois de capturar um grupo de animações, clique nele no painel Visão geral para ver os detalhes.

No painel Details, cada animação tem sua própria linha. Para ver o nome completo do elemento correspondente, redimensione a coluna de nome.

Passe o cursor sobre uma animação para destacá-la na janela de visualização. Clique na animação para selecioná-la no painel Elements.

Algumas animações são repetidas indefinidamente se a propriedade animation-iteration-count estiver definida como infinite. O painel Animações exibe as definições e iterações delas.

A seção mais escura à esquerda de uma animação é sua definição. Seções mais esmaecidas à direita representam iterações.

Por exemplo, na próxima captura de tela, as seções 2 e 3 representam iterações da seção 1.

Se dois elementos tiverem a mesma animação aplicada a eles, o painel Animations atribuirá a opção da mesma cor. A cor em si é aleatória e não tem significado. Por exemplo, na captura de tela abaixo Os dois elementos div.eye.left::after e div.eye.right::after têm a mesma animação (eyes). aplicadas a elas, assim como os elementos div.feet::before e div.feet::after.

Modificar animações

Há três maneiras de modificar uma animação com o painel Animations:

• Duração da animação.
• Tempos de frames-chave.
• Atraso no horário de início.

Importante:todas as mudanças feitas na guia Animações aplicam estilos inline aos elementos correspondentes para que você possa ver e reproduzir as animações resultantes imediatamente.

Nesta seção, suponha que a próxima captura de tela represente a animação original:

Para alterar a duração de uma animação, arraste o primeiro ou o último círculo.

Se a animação definir qualquer regra de quadro-chave, elas serão representadas como círculos internos brancos. Arraste um deles para alterar o tempo do frame-chave.

Para adicionar um atraso a uma animação, clique na animação em si, não nos círculos, e arraste-a para qualquer lugar.

Editar @keyframes ao vivo

Quando você modifica @keyframes em Estilos, os efeitos aparecem imediatamente no painel Animações.

Confira nesta página de demonstração:

1. Abra o painel Animações. Ele captura a animação contínua de pulsação na página automaticamente. Selecione a animação nos controles da barra de ações.
2. Em Elementos, inspecione o elemento com class="pulser" e, em Estilos, encontre a seção @keyframes pulse.
3. Tente modificar frames-chave, por exemplo, mudando o segundo frame-chave de 50% para 20%.
4. Observe como as mudanças nos estilos afetam a animação capturada pelo painel Animações.

Editar os pseudoelementos ::view-transition durante uma animação

Com a API View Transitions, é possível mudar o DOM em uma única etapa, criando uma transição animada entre os dois estados. Durante uma animação, a API constrói uma árvore de pseudoelementos com a seguinte estrutura:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Para editar essa estrutura em Elementos > Estilos:

1. Abra o DevTools e inspecione uma página que usou a API View Transitions. Por exemplo, esta página de demonstração.
2. Em Animações, clique em pausar Pausar.

3. Na página, acione uma animação. O painel Animações captura e pausa imediatamente. Agora você encontra a estrutura ::view-transition no DOM, na parte superior do elemento <head>.

   

4. Em Elements > Styles, modifique o CSS dos pseudoelementos ::view-transition.

5. Retome a animação e clique em Repetir para ver o resultado.

Para mais informações, consulte Transições simples e suaves com a API View Transitions.