O Inspetor de Animação oferece controle total sobre cada animação e transição CSS em execução em qualquer página da web. Pause todas as animações de uma vez, diminua a velocidade para inspeção quadro a quadro, acelere para testar o desempenho ou percorra a linha do tempo manualmente — tudo a partir de um único painel flutuante sem tocar nas Ferramentas do Desenvolvedor do navegador.
As animações CSS podem ser notoriamente difíceis de depurar. Elas acontecem rápido, se sobrepõem e as Ferramentas do Desenvolvedor do navegador fazem você caçar estilos computados para encontrar propriedades de animação. O Inspetor de Animação resolve isso detectando automaticamente cada animação @keyframes e transição CSS na página, listando-as com sua configuração completa (duração, suavização, atraso, contagem de iterações) e oferecendo controles de reprodução que funcionam globalmente ou por animação. Esteja você depurando um efeito de foco instável, ajustando o tempo de uma sequência de entrada de página ou tentando entender como uma biblioteca de animação complexa funciona nos bastidores, esta ferramenta coloca você no controle.
Congele instantaneamente todas as animações na página com um único clique. Todas as animações param em sua posição atual — não reiniciam no início. Clique em reproduzir para retomar exatamente de onde pararam. Essencial para inspecionar estados intermediários de animação que são impossíveis de capturar a olho nu.
Ajuste a velocidade de reprodução de todas as animações simultaneamente. Escolha entre 0.25x (um quarto da velocidade), 0.5x, 1x (normal), 2x ou 4x. Executar a 0.25x torna até as transições mais rápidas de 200ms fáceis de observar e depurar.
Cada animação e transição CSS na página é detectada automaticamente e exibida em uma lista rolável. Cada entrada mostra o nome da animação (ou propriedade de transição), duração, função de tempo (ease, linear, cubic-bezier), atraso, contagem de iterações e estado de execução atual.
Arraste o controle deslizante da linha do tempo para percorrer manualmente uma animação quadro a quadro. Veja exatamente o que acontece em 25%, 50% ou qualquer ponto no ciclo da animação. A página é atualizada em tempo real enquanto você arrasta.
Pause, reproduza ou ajuste a velocidade de animações individuais de forma independente. Isole uma única animação para depurá-la sem se distrair com outros elementos em movimento na página.
Clique em qualquer animação na lista para ver sua declaração CSS completa — definição @keyframes, detalhamento da abreviação da animação, estados iniciais e finais computados e a quais elementos ela é aplicada.
Inspetor de Animação covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskewDiminua a velocidade de uma animação para 0.25x para identificar exatamente onde ocorre uma instabilidade ou lentidão. Verifique se o problema é causado por 'layout thrashing' (animar largura/altura em vez de transformação), suavização incorreta ou animações conflitantes no mesmo elemento.
Use a rolagem da linha do tempo para ver como sua curva de suavização cubic-bezier realmente se parece na prática. Compare o comportamento de 'ease-in' vs 'ease-out' em porcentagens específicas. Ajuste os valores e repita até que o movimento pareça correto.
Visite um site com animações impressionantes (páginas de destino, sites de portfólio) e inspecione exatamente como elas são construídas. Veja as definições de @keyframes, valores de tempo e segmentação de elementos que fazem sequências complexas funcionarem.
Verifique se os efeitos de foco, spinners de carregamento, telas de esqueleto e transições de página se comportam corretamente. Pause nos estados intermediários para verificar falhas visuais como elementos sobrepostos, z-index incorreto durante a animação ou refluxo de conteúdo.
Identifique animações que podem causar problemas para usuários com distúrbios vestibulares. Verifique se 'prefers-reduced-motion' é devidamente respeitado pausando todas as animações e vendo se a página permanece totalmente funcional.
Abra o dock flutuante do DevSuite Pro e clique no ícone do Inspetor de Animação. A ferramenta verifica imediatamente a página e detecta todas as animações e transições CSS em execução.
Um painel flutuante aparece listando cada animação encontrada na página. Cada entrada mostra o nome da animação, duração, função de suavização e se está em execução ou pausada. O selo de contagem mostra o número total de animações detectadas.
Clique no botão Pausar global para congelar todas as animações simultaneamente. Os elementos permanecem em seu estado atual de animação intermediária, permitindo inspecionar propriedades CSS, tirar capturas de tela ou comparar posições.
Use o seletor de velocidade para diminuir a velocidade das animações para 0.25x para observação detalhada, ou aumentá-las para 4x para percorrer rapidamente animações longas. As mudanças de velocidade se aplicam instantaneamente sem reiniciar.
Arraste o controle deslizante da linha do tempo para a esquerda e para a direita para percorrer manualmente a animação. A página é atualizada em tempo real, mostrando exatamente como cada quadro se parece. Perfeito para detectar falhas ou verificar curvas de suavização.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.