Animasi: Memeriksa dan mengubah efek animasi CSS

Kayce Basques

Sofia Emelianova

Periksa dan ubah animasi dengan tab panel samping Animasi Chrome DevTools.

Ringkasan

Untuk merekam animasi, buka panel Animasi. Secara otomatis mendeteksi animasi dan mengurutkannya ke dalam kelompok.

Panel Animasi memiliki dua tujuan utama:

• Memeriksa animasi. Memperlambat, memutar ulang, atau memeriksa kode sumber untuk animasi ras.
• Mengubah animasi. Mengubah pengaturan waktu, penundaan, durasi, atau offset keyframe dari suatu 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 Elements > Panel Gaya.

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 tidak memiliki konsep nyata animasi grup, sehingga desainer gerak dan pengembang membuat dan mengatur waktu masing-masing animasi agar muncul sebagai 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 dimasukkan ke kelompok 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 sebelah panel samping Konsol. Sebagai tab panel samping, Anda dapat menggunakannya dengan panel mana saja atau memindahkannya ke bagian atas DevTools.

Panel Animasi 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 Animasi memiliki empat bagian utama:

1. Kontrol. Dari sini, Anda dapat memblokir Hapus semua grup animasi yang diambil, 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: berbasis 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 saat panel Animasi terbuka.

Memeriksa animasi

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

• Arahkan kursor ke thumbnail-nya di panel Overview untuk melihat pratinjaunya.
• Tarik titik pemutaran (batang vertikal merah) untuk menggeser animasi area tampilan, 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 Overview (sehingga ditampilkan di Details panel ) dan tekan tombol Replay. Tujuan animasi diputar ulang di area pandang.

Klik tombol Animation speed di panel Controls untuk mengubah kecepatan pratinjau grup animasi yang dipilih.

Lihat 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/pengulangan.

Misalnya, di {i>screenshot <i}berikutnya, bagian dua dan tiga menunjukkan iterasi dari bagian satu.

Jika dua elemen menggunakan animasi yang sama, panel Animasi akan menetapkan warna yang sama. Warnanya sendiri acak dan tidak memiliki arti. Misalnya, pada screenshot di bawah ini dua elemen div.eye.left::after dan div.eye.right::after memiliki animasi yang sama (eyes) diterapkan padanya, begitu juga dengan 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.

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

Untuk bagian ini, anggaplah screenshot berikutnya menampilkan animasi asli:

Untuk mengubah durasi animasi, tarik lingkaran pertama atau terakhir.

Jika animasi menentukan aturan keyframe, aturan tersebut akan ditampilkan 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 seret ke mana saja.

Edit @keyframes langsung

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

Coba di halaman demo ini:

1. Buka panel Animasi. Fitur ini merekam animasi denyut yang sedang berlangsung di halaman secara otomatis. Pilih animasi di bawah kontrol di panel tindakan.
2. Di Elements, periksa elemen dengan class="pulser" dan, di Elements, 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 Elements > 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 Animasi merekam aktivitas dan langsung menjedanya. Anda kini dapat menemukan struktur ::view-transition di DOM, di atas elemen <head>.

   

4. Di Elements > 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.