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 a guia Animações. Ele detecta animações e as classifica em grupos automaticamente.

A guia Animações tem dois propósitos principais:

• Inspecionar animações. Desacelere, reproduza novamente ou inspecione o código-fonte de um grupo de animações.
• Modificar animações Modifique o tempo, o atraso, a duração ou os deslocamentos do frame-chave de um grupo de animações. A edição de frames-chave e Bézier não é compatível.

Importante:é possível editar o tempo dos easings da transição CSS e das animações e configurar curvas de Bézier personalizadas com o Editor de easing no painel Elementos > Estilos.

A guia Animações é compatível com animações CSS, transições CSS e Web, além da 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, de modo que motion designers e desenvolvedores compõem e cronometram animações individuais para que apareçam como um efeito visual coerente. A guia 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, a guia Animações agrupa as animações acionadas no mesmo bloco de script. No entanto, se forem assíncronas, elas ficarão em grupos diferentes.

Começar

Há duas maneiras de abrir a guia Animações:

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

• Abra o Menu de comandos 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, a guia Animações é aberta como uma guia ao lado da gaveta Console. Como uma guia de gaveta, você pode usá-la com qualquer painel ou mover para a parte superior do DevTools.

A guia Animações tem quatro seções principais:

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

2. Visão geral. Mostra grupos de animações capturados de dois tipos marcados com ícones: rolagem do mouse e programação regular (baseada em 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 programar animações com base em tempo.

   Na linha do tempo, é possível reproduzir assistir novamente, deslizar 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 a guia Animações estiver aberta. Atualize a animação se ela for acionada no carregamento da página.

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 ver uma prévia dela.
• Arraste o marcador (barra vertical vermelha) para acessar um ponto específico da animação da janela de visualização ou clique em qualquer lugar na Linha do tempo. A animação continua a ser reproduzida se já estiver sendo reproduzida e, caso contrário, é interrompida.
• Selecione o grupo de animações no painel Visão geral para que ele seja exibido no painel Detalhes e pressione o botão Repetir . 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 sua própria linha. Para ver todo o nome 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 Elementos.

Algumas animações se repetem indefinidamente se a propriedade animation-iteration-count estiver definida como infinite. A guia Animações exibe as definições e iterações delas.

A seção mais escura à esquerda de uma animação é sua definição. As seções à direita, mais esmaecidas, representam as 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, a guia Animations vai atribuir a mesma cor a eles. 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) aplicada a eles, assim como os elementos div.feet::before e div.feet::after.

Modificar animações

Há três maneiras de modificar uma animação com a guia Animações:

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

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

Para esta seção, suponha que a próxima captura de tela representa 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 regras 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 os pseudoelementos ::view-transition durante uma animação

Com a API View Transitions, você pode 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 a captura e pausa imediatamente. Agora você pode encontrar a estrutura ::view-transition no DOM, na parte de cima do elemento <head>.

   

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

5. Retome a animação e reproduza-a novamente para ver o resultado.

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