Pemeriksa Animasi

Pratinjau Langsung

example.com/animated-landing Pemeriksa Animasi: AKTIF

▶

⏸

0.25x 0.5x 1x 2x 4x

4 terdeteksi

Animasi di halaman

fadeInUp

.hero-title · @keyframes

0.6s ease-out

tunda: 0s · 1 iterasi

berjalan
slideIn

.sidebar-nav · @keyframes

0.4s ease

tunda: 0.2s · 1 iterasi

berjalan
pulse

.notification-badge · @keyframes

2s ease-in-out

tunda: 0s · tidak terbatas

dijeda
background-color

.cta-button · transition

0.2s ease

properti transisi

active

Garis Waktu — fadeInUp 0.24s / 0.60s

0.0s 0.15s 0.30s 0.45s 0.60s

Detail Animasi

fadeInUp on .hero-title

@keyframes

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

Properti

duration0.6s

easingease-out

delay0s

iterations1

directionnormal

fill-modeforwards

Keadaan Saat Ini (40%)

opacity0.4

translateY12px

Fitur Utama

Jeda / Putar Semua Animasi

Bekukan setiap animasi di halaman secara instan dengan satu klik. Semua animasi berhenti di posisi saat ini — tidak diatur ulang ke awal. Klik putar untuk melanjutkan tepat dari tempat mereka berhenti. Sangat penting untuk memeriksa status tengah animasi yang mustahil ditangkap dengan mata telanjang.

Kontrol Kecepatan Variabel

Sesuaikan kecepatan pemutaran semua animasi secara bersamaan. Pilih dari 0,25x (seperempat kecepatan), 0,5x, 1x (normal), 2x, atau 4x. Menjalankan animasi pada 0,25x membuat transisi tercepat 200ms sekalipun mudah diamati dan diperbaiki.

Daftar Animasi Lengkap

Setiap animasi dan transisi CSS di halaman dideteksi secara otomatis dan ditampilkan dalam daftar yang dapat digulir. Setiap entri menunjukkan nama animasi (atau properti transisi), durasi, fungsi waktu (ease, linear, cubic-bezier), penundaan, jumlah iterasi, dan status jalannya saat ini.

Scrubbing Timeline

Seret scrubber timeline untuk menelusuri animasi secara manual bingkai demi bingkai. Lihat dengan tepat apa yang terjadi pada 25%, 50%, atau titik mana pun dalam siklus animasi. Halaman diperbarui secara real-time saat Anda menyeretnya.

Kontrol Per Animasi

Jeda, putar, atau sesuaikan kecepatan untuk setiap animasi secara independen. Isolasi satu animasi untuk men-debug-nya tanpa terganggu oleh elemen bergerak lainnya di halaman.

Detail Properti Animasi

Klik animasi apa pun dalam daftar untuk melihat deklarasi CSS lengkapnya — definisi @keyframes, rincian shorthand animasi, status awal dan akhir yang dihitung, serta elemen mana saja yang menerapkannya.

Apa yang Bisa Anda Periksa

Pemeriksa Animasi covers the following, organized by category:

Properti Animasi

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

Properti Transisi

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

Fungsi Waktu

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

Properti Transformasi

transform
transform-origin
translate
rotate
scale
skew

Kasus Penggunaan Umum

Menangani Animasi yang Terputus-putus

Perlambat animasi hingga 0,25x untuk mengidentifikasi dengan tepat di mana kegagapan atau 'jank' terjadi. Periksa apakah masalah disebabkan oleh layout thrashing (menggunakan lebar/tinggi alih-alih transform), easing yang salah, atau animasi yang tumpang tindih pada elemen yang sama.

Menyempurnakan Waktu & Kurva Easing

Gunakan scrubbing timeline untuk melihat bagaimana kurva easing cubic-bezier Anda sebenarnya terlihat dalam praktik. Bandingkan perilaku ease-in vs ease-out pada persentase tertentu. Sesuaikan nilai dan putar ulang hingga gerakan terasa pas.

Memahami Library Animasi

Kunjungi situs web dengan animasi yang mengesankan (landing page, situs portofolio) dan periksa bagaimana animasi tersebut dibuat. Lihat definisi @keyframes, nilai waktu, dan penargetan elemen yang membuat urutan kompleks berfungsi.

Uji QA pada Interaksi Animasi

Verifikasi bahwa efek hover, spinner pemuatan, layar skeleton, dan transisi halaman semuanya berperilaku benar. Jeda pada status tengah untuk memeriksa kesalahan visual seperti elemen yang tumpang tindih, z-index yang salah saat animasi, atau reflow konten.

Tinjauan Aksesibilitas Gerakan

Identifikasi animasi yang mungkin menyebabkan masalah bagi pengguna dengan gangguan vestibular. Periksa apakah 'prefers-reduced-motion' dihormati dengan benar dengan menjeda semua animasi dan melihat apakah halaman tetap berfungsi penuh.

Cara Menggunakan

Aktifkan Pemeriksa Animasi

Buka dok mengambang DevSuite Pro dan klik ikon Pemeriksa Animasi. Alat ini akan segera memindai halaman dan mendeteksi semua animasi serta transisi CSS yang sedang berjalan.

Tinjau Animasi yang Terdeteksi

Panel mengambang akan muncul mencantumkan setiap animasi yang ditemukan di halaman. Setiap entri menunjukkan nama animasi, durasi, fungsi easing, dan apakah sedang berjalan atau dijeda. Lencana hitungan menunjukkan total animasi yang dideteksi.

Jeda & Periksa

Klik tombol Jeda global untuk membekukan semua animasi secara bersamaan. Elemen tetap berada dalam kondisi tengah animasi saat ini, memungkinkan Anda memeriksa properti CSS, mengambil tangkapan layar, atau membandingkan posisi.

Sesuaikan Kecepatan

Gunakan pemilih kecepatan untuk memperlambat animasi hingga 0,25x untuk pengamatan mendetail, atau percepat hingga 4x untuk melewati animasi panjang dengan cepat. Perubahan kecepatan diterapkan secara instan tanpa memulai ulang.

Scrub Timeline

Seret scrubber timeline ke kiri dan kanan untuk melangkah secara manual melalui animasi. Halaman diperbarui secara real-time, menunjukkan dengan tepat tampilan setiap bingkai. Sempurna untuk menemukan kesalahan visual atau memverifikasi kurva easing.