Depurador de animações e transições

Chrome DevTools → Mais ferramentas → Animações (ou Cmd+Shift+P → "Animações"). O painel registra transições e animações CSS enquanto são executadas, exibindo-as em uma linha do tempo com controles de navegação manual e velocidade de reprodução.

O painel de animações oferece velocidades de reprodução de 10%, 25% e 100%. Reduzir para 10% revela problemas de temporização, problemas nas curvas de suavização e travamentos invisíveis em velocidade total — algo essencial para depurar coreografias complexas com vários elementos.

Cada animação registrada aparece como uma linha com o nome do elemento, uma barra de duração, um deslocamento do atraso e uma contagem de iterações. Os losangos dos quadros-chave mostram mudanças na função de temporização. Passar o cursor sobre uma linha destaca o elemento na área de visualização.

Arraste o indicador de reprodução no painel Animações até qualquer ponto da linha do tempo da animação. A página renderiza exatamente esse quadro — congele qualquer animação em qualquer momento para inspecionar simultaneamente as posições dos elementos, a opacidade e os valores de transform no painel Calculado.

Clique em uma linha de animação para expandi-la. Quadros-chave individuais aparecem como losangos na linha do tempo. Clique em um losango de quadro-chave para ir à regra @keyframes correspondente no painel Estilos e editá-la com pré-visualização em tempo real.

O Chrome DevTools mostra curvas cubic-bezier para cada segmento da animação. Clique no ícone da curva ao lado de uma função de temporização no painel Estilos para abrir o editor de cubic-bezier — arraste os pontos de controle e veja a animação ser atualizada em tempo real.

As transições CSS são registradas no painel Animações quando acionadas. Acione uma passagem do cursor ou uma alternância de classe, e o painel capturará a transição. Inspecione sua duração, seu atraso e sua função de temporização — isso é útil quando as transições parecem erradas, mas sua origem não está clara.

Com Renderização → Bordas das camadas ativado (DevTools → Renderização), os elementos animados em sua própria camada da GPU exibem bordas verdes. Animações não compostas (que animam width, top ou color) não exibem borda de camada e podem causar piscamento da pintura — visível quando Piscamento da pintura está ativado.

Grave um perfil de desempenho durante a animação. No gráfico de chamas, procure eventos longos de Pintura ou Disposição que coincidam com os quadros da animação. Animações executadas apenas pelo compositor (transform/opacity) aparecem somente como eventos de composição de camadas — rápidas e sem pintura.

Animações em JS que usam rAF aparecem no painel Desempenho, na seção Quadros. Retornos de chamada rAF longos que excedem 16ms causam perda de quadros. Analise o retorno de chamada para encontrar cálculos custosos e mova-os para fora da linha de execução principal usando Web Workers, se possível.

A API de animações da Web (element.animate()) e as bibliotecas baseadas em WAAPI aparecem no painel Animações junto com as animações CSS. O painel não consegue distinguir a origem — CSS ou WAAPI —, mas os controles de navegação manual e câmera lenta funcionam para ambas.

O painel Animações do DevTools registra transições e animações CSS com uma linha do tempo que permite navegação manual, velocidade de reprodução variável, inspeção de quadros-chave e edição de cubic-bezier. Com a criação de perfis de desempenho e a visualização de camadas, ele oferece ferramentas abrangentes para depurar tanto a correção quanto o desempenho das animações CSS.