Ispettore animazioni

Anteprima dal vivo

example.com/animated-landing Animation Inspector: ON

▶

⏸

0.25x 0.5x 1x 2x 4x

4 detected

Animations on page

fadeInUp

.hero-title · @keyframes

0.6s ease-out

delay: 0s · 1 iteration

running
slideIn

.sidebar-nav · @keyframes

0.4s ease

delay: 0.2s · 1 iteration

running
pulse

.notification-badge · @keyframes

2s ease-in-out

delay: 0s · infinite

paused
background-color

.cta-button · transition

0.2s ease

transition property

active

Timeline — fadeInUp 0.24s / 0.60s

0.0s 0.15s 0.30s 0.45s 0.60s

Animation Details

fadeInUp on .hero-title

@keyframes

0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}

Properties

duration0.6s

easingease-out

delay0s

iterations1

directionnormal

fill-modeforwards

Current State (40%)

opacity0.4

translateY12px

Caratteristiche principali

Pausa / Riproduci tutte le animazioni

Congela istantaneamente ogni animazione sulla pagina con un clic. Tutte le animazioni si fermano nella posizione corrente — non vengono riportate all'inizio.

Controllo velocità variabile

Regola la velocità di riproduzione di tutte le animazioni simultaneamente. Scegli tra 0.25x, 0.5x, 1x, 2x o 4x.

Elenco completo animazioni

Ogni animazione CSS e transizione sulla pagina viene rilevata automaticamente e mostrata in un elenco scorrevole con tutti i dettagli.

Scorrimento timeline

Trascina lo scrubber della timeline per avanzare manualmente frame per frame nell'animazione. La pagina si aggiorna in tempo reale.

Controllo per singola animazione

Pausa, riproduci o regola la velocità delle singole animazioni indipendentemente.

Dettagli proprietà animazione

Clicca su qualsiasi animazione nell'elenco per vedere la dichiarazione CSS completa — definizione @keyframes, scomposizione della proprietà animation e stati calcolati.

Cosa puoi ispezionare

Ispettore animazioni covers the following, organized by category:

Proprietà animazione

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

Proprietà transizione

transition-property
transition-duration
transition-timing-function
transition-delay

Funzioni di temporizzazione

ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier()
steps()

Proprietà trasformazione

transform
transform-origin
translate
rotate
scale
skew

Casi d'uso comuni

Debug animazioni con scatti

Rallenta un'animazione a 0.25x per identificare esattamente dove si verifica uno scatto.

Perfezionamento timing e curve easing

Usa lo scorrimento timeline per vedere come la tua curva cubic-bezier appare in pratica.

Comprensione librerie di animazione

Visita un sito con animazioni impressionanti e ispeziona esattamente come sono costruite.

Test QA interazioni animate

Verifica che effetti hover, spinner di caricamento e transizioni di pagina si comportino correttamente.

Revisione accessibilità del movimento

Identifica animazioni che potrebbero causare problemi agli utenti con disturbi vestibolari.

Come usare

Attiva l'Ispettore animazioni

Apri il dock fluttuante di DevSuite Pro e clicca sull'icona dell'Ispettore animazioni.

Rivedi le animazioni rilevate

Un pannello fluttuante elenca ogni animazione trovata sulla pagina con nome, durata, funzione di easing e stato.

Pausa e ispeziona

Clicca il pulsante Pausa globale per congelare tutte le animazioni simultaneamente.

Regola la velocità

Usa il selettore di velocità per rallentare le animazioni a 0.25x o accelerarle a 4x.

Scorri la timeline

Trascina lo scrubber della timeline a sinistra e destra per avanzare manualmente nell'animazione.