Tips DevTools: Cara memeriksa dan mengubah animasi CSS
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2022-08-11 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2022-08-11 UTC."],[],[],null,[]]
