Penyahikutan Animasi dan Transisi

Chrome DevTools → Alat lainnya → Animasi (atau Cmd+Shift+P → "Animasi"). Panel ini merekam transisi dan animasi CSS saat berjalan, lalu menampilkannya pada linimasa dengan kontrol penggeseran penanda waktu dan kecepatan pemutaran.

Panel Animasi menyediakan kecepatan pemutaran 10%, 25%, dan 100%. Memperlambatnya hingga 10% menampilkan masalah pengaturan waktu, masalah kurva pelonggaran, dan tersendatnya animasi yang tidak terlihat pada kecepatan penuh — hal yang penting untuk men-debug orkestrasi banyak elemen yang kompleks.

Setiap animasi yang direkam muncul sebagai baris dengan nama elemennya, bilah durasi, pergeseran penundaan, dan jumlah pengulangan. Berlian keyframe menunjukkan perubahan fungsi waktu. Saat kursor diarahkan ke suatu baris, elemen tersebut disorot di area pandang.

Seret penanda pemutaran di panel Animasi ke titik mana pun pada linimasa animasi. Halaman akan merender bingkai tersebut secara tepat — bekukan animasi apa pun pada waktu apa pun untuk memeriksa posisi elemen, opasitas, dan nilai transform secara bersamaan di panel Nilai Terhitung.

Klik baris animasi untuk membukanya. Setiap keyframe akan muncul sebagai berlian pada linimasa. Klik berlian keyframe untuk berpindah ke aturan @keyframes yang sesuai di panel Gaya dan mengeditnya dengan pratinjau langsung.

Chrome DevTools menampilkan kurva cubic-bezier untuk setiap segmen animasi. Klik ikon kurva di samping fungsi waktu pada panel Gaya untuk membuka editor cubic-bezier — seret titik kontrol dan lihat animasi diperbarui secara langsung.

Transisi CSS direkam di panel Animasi saat dipicu. Picu hover atau perubahan kelas, lalu panel akan merekam transisinya. Periksa durasi, penundaan, dan fungsi waktunya — berguna saat transisi terasa salah tetapi sumbernya tidak jelas.

Dengan Batas Lapisan diaktifkan melalui Perenderan → (DevTools → Perenderan), elemen animasi pada lapisan GPU sendiri akan menampilkan batas hijau. Animasi non-komposit (yang menganimasikan width, top, atau color) tidak menampilkan batas lapisan dan dapat menyebabkan kilatan pengecatan — terlihat jika Kilatan Pengecatan diaktifkan.

Rekam profil Performa selama animasi. Pada diagram api, cari peristiwa Pengecatan atau Tata Letak yang berdurasi panjang dan berkorelasi dengan bingkai animasi. Animasi yang hanya ditangani kompositor (transform/opasitas) muncul hanya sebagai peristiwa Lapisan Komposit — cepat dan bebas pengecatan.

Animasi JS yang menggunakan rAF muncul di panel Performa pada bagian Bingkai. Callback rAF yang berlangsung lebih dari 16 md menyebabkan bingkai terlewat. Buat profil callback tersebut untuk menemukan perhitungan yang mahal dan, jika memungkinkan, pindahkan perhitungan itu ke luar thread utama menggunakan Web Worker.

API Animasi Web (element.animate()) dan pustaka berbasis WAAPI muncul di panel Animasi bersama animasi CSS. Panel ini tidak dapat membedakan sumbernya — CSS atau WAAPI — tetapi kontrol penggeseran penanda waktu dan gerak lambat berfungsi untuk keduanya.

Panel Animasi DevTools merekam transisi dan animasi CSS dengan linimasa yang dapat digeser, kecepatan pemutaran yang dapat diubah, inspeksi keyframe, dan pengeditan cubic-bezier. Jika digabungkan dengan pembuatan profil Performa dan visualisasi lapisan, panel ini menyediakan alat lengkap untuk men-debug ketepatan maupun performa animasi CSS.