Tips DevTools: Cara memeriksa dan mengubah animasi CSS

Sofia Emelianova
Sofia Emelianova

Tab Animasi Chrome DevTools adalah alat canggih yang membantu Anda memperlambat, memutar ulang, menyesuaikan pengaturan waktu animasi CSS, dan langsung melihat hasilnya.

Tab Animasi, saat terbuka, akan merekam animasi secara otomatis, mengelompokkan animasi dengan mudah, dan memungkinkan Anda:

  • Putar ulang dan perlambat animasi untuk memeriksanya dengan lebih baik.
  • Sesuaikan durasi, pengaturan waktu, dan penundaan dengan menarik titik di linimasa, bukan menebak dan menetapkan nilai CSS secara manual.

Selain itu, Anda dapat mengedit pengaturan waktu easing dan menetapkan nilai kurva cubic-bezier kustom dengan Editor Easing di panel Elemen > Gaya. Untuk mempelajari lebih lanjut, lihat Mengedit pengaturan waktu animasi dan transisi dengan Easing Editor.

Untuk pengalaman belajar yang lebih praktis, ikuti panduan Memeriksa dan mengubah efek animasi CSS.