Tips DevTools: Cara memeriksa dan mengubah animasi CSS

Sofia Emelianova
Sofia Emelianova

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

Saat terbuka, tab Animations akan merekam animasi secara otomatis, mengelompokkannya 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 tanpa menebak dan menetapkan nilai CSS secara manual.

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

Untuk pengalaman belajar yang lebih langsung, ikuti panduan Memeriksa dan memodifikasi efek animasi CSS.