Animasi: Memeriksa dan mengubah efek animasi CSS

Kayce Basques

Sofia Emelianova

Memeriksa dan mengubah animasi dengan tab panel samping Animasi Chrome DevTools.

Ringkasan

Untuk merekam animasi, buka panel Animations. Alat ini secara otomatis mendeteksi animasi dan mengelompokkannya.

Panel Animations memiliki dua tujuan utama:

• Memeriksa animasi. Perlambat, putar ulang, atau periksa kode sumber untuk grup animasi.
• Mengubah animasi. Ubah pengaturan waktu, penundaan, durasi, atau offset keyframe grup animasi. Pengeditan keyframe dan Bezier tidak didukung.

Poin penting: Anda dapat mengedit pengaturan waktu transisi CSS dan easing animasi serta mengonfigurasi kurva Bezier kustom dengan Easing Editor di panel Elements > Styles.

Panel Animations mendukung animasi CSS, transisi CSS, animasi web, dan View Transitions API. Animasi requestAnimationFrame belum didukung.

Apa yang dimaksud dengan grup animasi?

Grup animasi adalah kumpulan animasi yang tampaknya saling berkaitan.

Untuk saat ini, web belum memiliki konsep nyata animasi grup, sehingga desainer animasi dan developer membuat dan mengatur waktu masing-masing animasi agar tampak seperti satu efek visual yang koheren. Panel Animations memprediksi animasi terkait berdasarkan waktu mulai (tidak termasuk penundaan) dan mengelompokkan animasi secara berdampingan.

Dengan kata lain, panel Animasi mengelompokkan animasi yang dipicu di blok skrip yang sama, tetapi jika asinkron, animasi tersebut akan berada di grup yang berbeda.

Membuka panel Animasi

Ada dua cara untuk membuka panel Animasi:

• Pilih Sesuaikan dan kontrol DevTools > Alat lainnya > Animasi.

• Buka Menu Perintah dengan menekan salah satu tombol berikut:

  • Di macOS: Command+Shift+P
  • Di Windows, Linux, atau ChromeOS: Kontrol+Shift+P

  Kemudian, mulai ketik Show Animations dan pilih panel Panel samping yang sesuai.

Secara default, panel Animasi akan terbuka sebagai tab di samping panel samping Konsol. Sebagai tab panel samping, Anda dapat menggunakannya dengan panel mana pun atau memindahkannya ke bagian atas DevTools.

Panel Animations akan otomatis merekam animasi yang sedang berlangsung saat Anda membukanya. Jika animasi dipicu saat halaman dimuat atau telah berhenti, muat ulang halaman dengan panel terbuka.

Memahami UI panel Animasi

Panel Animations memiliki empat bagian utama:

1. Kontrol. Dari sini, Anda dapat memblokir Hapus semua grup animasi yang direkam, menjeda Jeda atau play_arrow Lanjutkan animasi, atau mengubah kecepatan grup animasi yang dipilih.

2. Ringkasan. Menampilkan grup animasi yang diambil dari dua jenis yang ditandai dengan ikon: scroll mouse dan jadwal reguler (berbasis waktu).

   Pilih grup animasi di sini untuk memeriksa dan mengubahnya di panel Details.

3. Linimasa. Bergantung pada jenis grup animasi, linimasa dapat berupa:

   • Dalam piksel untuk animasi berbasis scroll mouse.
   • Dalam milidetik untuk animasi berbasis waktu jadwal.

   Di linimasa, Anda dapat memutar ulang Putar ulang animasi, menggesernya, atau melompat ke titik tertentu.

4. Detail. Periksa dan ubah grup animasi yang dipilih.

Untuk merekam animasi, picu animasi saat panel Animations terbuka.

Memeriksa animasi

Setelah Anda merekam animasi, ada beberapa cara untuk memutar ulang:

• Arahkan kursor ke atas thumbnail-nya di panel Ringkasan untuk melihat pratinjaunya.
• Tarik titik pemutaran (bilah vertikal merah) untuk menghapus animasi tampilan yang terlihat atau klik di mana saja pada Linimasa untuk menyetel titik pemutaran ke titik tertentu. Animasi akan terus diputar jika sudah diputar dan berhenti jika tidak.
• Pilih grup animasi dari panel Ringkasan (sehingga ditampilkan di panel Detail) dan tekan tombol Putar Ulang. Animasi diputar ulang di area pandang.

Klik tombol Kecepatan animasi di panel Kontrol untuk mengubah kecepatan pratinjau grup animasi yang dipilih.

Melihat detail animasi

Setelah Anda merekam grup animasi, klik grup tersebut dari panel Ringkasan untuk melihat detailnya.

Di panel Details, setiap animasi mendapatkan barisnya sendiri. Untuk melihat seluruh nama elemen yang sesuai, ubah ukuran kolom nama.

Arahkan kursor ke animasi untuk menyorotinya di area pandang. Klik animasi untuk memilihnya di panel Elements.

Beberapa animasi diulang tanpa batas jika properti animation-iteration-count-nya ditetapkan ke infinite. Panel Animations menampilkan definisi dan iterasinya.

Bagian animasi paling kiri yang lebih gelap adalah definisinya. Bagian kanan yang lebih pudar mewakili iterasi.

Misalnya, pada screenshot berikutnya, bagian dua dan tiga mewakili iterasi bagian satu.

Jika dua elemen menggunakan animasi yang sama, panel Animations akan menetapkan warna yang sama. Warna ini sendiri acak dan tidak bermakna apa-apa. Misalnya, dalam screenshot di bawah, dua elemen div.eye.left::after dan div.eye.right::after memiliki animasi yang sama (eyes) yang diterapkan padanya, seperti elemen div.feet::before dan div.feet::after.

Mengubah animasi

Ada tiga cara untuk mengubah animasi dengan panel Animations:

• Durasi animasi.
• Pengaturan waktu keyframe.
• Penundaan waktu mulai.

Poin penting: Setiap perubahan yang Anda buat di tab Animations akan menerapkan gaya inline ke elemen yang sesuai, sehingga Anda dapat langsung melihat dan memutar ulang animasi yang dihasilkan.

Untuk bagian ini, misalkan screenshot berikutnya mewakili animasi asli:

Untuk mengubah durasi animasi, tarik lingkaran pertama atau terakhir.

Jika animasi mendefinisikan aturan keyframe, aturan tersebut digambarkan sebagai lingkaran dalam berwarna putih. Tarik salah satu lingkaran ini untuk mengubah pengaturan waktu keyframe.

Untuk menambahkan penundaan pada animasi, klik animasi itu sendiri, bukan lingkaran, lalu tarik ke mana saja.

Edit @keyframes live

Saat mengubah @keyframes di Gaya, Anda dapat langsung melihat efeknya di panel Animasi.

Coba di halaman demo ini:

1. Buka panel Animations. Alat ini akan otomatis merekam animasi denyut yang sedang berlangsung di halaman. Pilih animasi di bagian kontrol pada panel tindakan.
2. Di Elemen, periksa elemen dengan class="pulser" dan, di Gaya, temukan bagian @keyframes pulse.
3. Coba ubah keyframe, misalnya, ubah keyframe kedua dari 50% menjadi 20%.
4. Amati pengaruh perubahan Anda di Gaya terhadap animasi yang diambil oleh panel Animasi.

Mengedit elemen pseudo ::view-transition selama animasi

Dengan View Transitions API, Anda dapat mengubah DOM dalam satu langkah, sekaligus membuat transisi animasi di antara dua status. Selama animasi, API membuat hierarki elemen pseudo dengan struktur berikut:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

Untuk mengedit struktur ini di Elemen > Gaya:

1. Buka DevTools dan periksa halaman yang menggunakan View Transitions API. Misalnya, halaman demo ini.
2. Di Animasi, klik jeda Jeda.

3. Di halaman, picu animasi. Panel Animations akan menangkapnya dan segera menjeda. Anda kini dapat menemukan struktur ::view-transition di DOM, di atas elemen <head>.

   

4. Di Elemen > Gaya, ubah CSS elemen pseudo ::view-transition.

5. Lanjutkan animasi dan Putar ulang untuk melihat hasilnya.

Untuk informasi selengkapnya, lihat Transisi yang lancar dan sederhana dengan View Transitions API.