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

Kayce Basques

Sofia Emelianova

Inspecione e modifique animações com a guia de 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 duas finalidades principais:

• Inspecione animações. Desacelerar, reproduzir ou inspecionar uma animação no código-fonte grupo.
• 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.

O painel Animações é compatível com animações CSS, transições CSS e animações da Web e a API View Transitions. Animações requestAnimationFrame ainda não são compatíveis.

O que é um grupo de animações?

Um grupo de animações é um conjunto de animações que parecem ser 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 Animations agrupa animações acionadas no mesmo bloco de script. No entanto, 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.

• Abra o menu de comando pressionando 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 da gaveta correspondente.

Por padrão, o painel Animações é aberto como uma guia ao lado da gaveta Console. Como uma guia de gaveta, você pode usá-la com qualquer painel ou movê-la para a parte superior do DevTools.

O painel Animações captura automaticamente 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 Animações tem quatro seções principais:

1. Controles. Aqui, é possível bloquear Limpar todos os grupos de animações capturados, pausar as animações Pausar ou play_arrow Retomar as animações ou mudar a velocidade do grupo de animações selecionado.

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

   Selecione um grupo de animações aqui para inspecionar e modificar no painel Detalhes.

3. Cronograma. Dependendo do tipo de grupo de animações, a linha do tempo pode ser:

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

   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 Animations estiver aberto.

Inspecionar animações

Depois de capturar uma animação, há algumas maneiras 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ções no painel Visão geral para que ele apareça em Detalhes. ) e pressione o botão Replay. A 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 Detalhes, cada animação tem a 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 na Elements.

Algumas animações serão repetidas indefinidamente se a propriedade animation-iteration-count for 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 captura de tela a seguir, as seções dois e três representam iterações da seção um.

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 significância. 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.

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 frame-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

Ao modificar @keyframes em Estilos, você vai poder conferir os efeitos no painel Animações imediatamente.

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 Elements, inspecione o elemento com class="pulser" e, em Elements, 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 em Estilos afetam a animação capturada pelo painel Animações.

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

Com a API View Transitions, você pode alterar o DOM em uma única etapa e criar 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 Elements > 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 faz a captura e pausa imediatamente. Agora você encontra a estrutura ::view-transition no DOM, na parte superior do elemento <head>.

   

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

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

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