Animatie-inspecteur

Live voorvertoning

example.com/animated-landing Animatie Inspector: AAN

▶

⏸

0.25x 0.5x 1x 2x 4x

4 gedetecteerd

Animaties op pagina

fadeInUp

.hero-title · @keyframes

0.6s ease-out

vertraging: 0s · 1 iteratie

actief
slideIn

.sidebar-nav · @keyframes

0.4s ease

vertraging: 0.2s · 1 iteratie

actief
pulse

.notification-badge · @keyframes

2s ease-in-out

vertraging: 0s · oneindig

gepauzeerd
background-color

.cta-button · transition

0.2s ease

transitie-eigenschap

active

Tijdlijn — fadeInUp 0.24s / 0.60s

0.0s 0.15s 0.30s 0.45s 0.60s

Animatiedetails

fadeInUp on .hero-title

@keyframes

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

Eigenschappen

duration0.6s

easingease-out

delay0s

iterations1

directionnormal

fill-modeforwards

Huidige status (40%)

opacity0.4

translateY12px

Belangrijkste kenmerken

Pauzeer/Speel alle animaties

Bevries elke animatie op de pagina met één klik op hun huidige positie.

Variabele snelheidsregeling

Pas de afspeelsnelheid aan van 0.25x tot 4x.

Volledige animatielijst

Elke animatie en overgang wordt automatisch gedetecteerd en weergegeven.

Tijdlijn scrubben

Sleep de tijdlijnschuif om frame voor frame door een animatie te bewegen.

Individuele animatiecontrole

Pauzeer of pas de snelheid van individuele animaties onafhankelijk aan.

Animatie-eigenschapdetails

Klik op een animatie om de volledige CSS-declaratie te zien.

Wat u kunt inspecteren

Animatie-inspecteur covers the following, organized by category:

Animatie-eigenschappen

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

Overgangseigenschappen

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

Timingfuncties

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

Transformatie-eigenschappen

transform
transform-origin
translate
rotate
scale
skew

Veelvoorkomende scenario's

Haperend animaties debuggen

Vertraag naar 0.25x om precies te zien waar een hapering optreedt.

Timing en easing verfijnen

Gebruik tijdlijnscrubbing om easing-curves in de praktijk te bekijken.

Animatiebibliotheken begrijpen

Inspecteer hoe indrukwekkende animaties op websites zijn gebouwd.

QA-testen animaties

Controleer of hover-effecten en overgangen correct werken.

Toegankelijkheidsreview beweging

Controleer of prefers-reduced-motion correct wordt gerespecteerd.

Hoe te gebruiken

Activeer

Open de dock en klik op het pictogram.

Bekijk gedetecteerde animaties

Een paneel toont elke gevonden animatie.

Pauzeer en inspecteer

Klik op Pauzeren om alle animaties te bevriezen.

Pas snelheid aan

Gebruik de snelheidskiezer om te vertragen of versnellen.

Scrub de tijdlijn

Sleep de tijdlijnschuif om handmatig door animaties te stappen.