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

Kayce Basques
Kayce Basques
Sofia Emelianova
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.

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 Mais. Personalizar e controlar DevTools > Mais ferramentas > Animações. Animações no menu.
  • 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. Mostrar animações.

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.

Guia "Animações" vazia.

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

Seções do painel Animações.

  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. Selecione um grupo de animações aqui para inspecionar e modificar no painel Detalhes.
  3. Linha do tempo. Reproduzir reproduzir uma animação, 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 Botão "Repetir".. A animação é reproduzida na janela de visualização.

Clique nos botões Botões de velocidade da animação. 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.

O painel "Detalhes".

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.

Passe o cursor sobre uma animação para destacá-la na janela de visualização.

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.

Iterações de animação.

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.

Diagrama de iterações de animação.

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.

Animações codificadas por cores.

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.

Para esta seção, suponha que a próxima captura de tela representa a animação original:

Animação original antes da modificação.

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

Duração modificada.

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.

Frame-chave modificado.

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.

Atraso modificado.

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

    Edição do CSS do pseudoelemento ::view-transition.

  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.