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 Animasi memiliki dua tujuan utama:

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

Panel Animasi 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 tampak saling terkait.

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 Animasi memprediksi animasi terkait berdasarkan waktu mulai (tidak termasuk penundaan) dan mengelompokkannya 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 Command dengan menekan salah satu tombol berikut:

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

  Lalu 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 pemuatan halaman 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. Jadwal. 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 Memutar ulang animasi, menggeser, atau melompat ke titik tertentu.

4. Detail. Memeriksa dan mengubah 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 indikator pemutar (bilah vertikal merah) untuk menghapus animasi tampilan yang terlihat atau klik di mana saja pada Linimasa untuk menyetel indikator pemutar 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 merekam grup animasi, klik grup tersebut dari panel Overview untuk melihat detailnya.

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

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

Beberapa animasi berulang tanpa batas jika properti animation-iteration-count ditetapkan ke infinite. Panel Animasi menampilkan definisi dan iterasinya.

Bagian animasi yang paling kiri dan 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. Warnanya sendiri acak dan tidak memiliki arti. 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 halnya elemen div.feet::before dan div.feet::after.

Mengubah animasi

Ada tiga cara untuk mengubah animasi dengan panel Animasi:

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

Untuk bagian ini, anggaplah screenshot berikutnya menampilkan 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 opsi 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. Fitur ini merekam animasi denyut yang sedang berlangsung di halaman secara otomatis. Pilih animasi di bawah kontrol di panel tindakan.
2. Di Elemen, periksa elemen dengan class="pulser" dan, di Gaya, cari bagian @keyframes pulse.
3. Coba ubah keyframe, misalnya, ubah keyframe kedua dari 50% menjadi 20%.
4. Amati bagaimana perubahan Anda di Gaya memengaruhi 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 kedua status tersebut. 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.