. Halaman ini juga mengimpor file CSS bernama style.css:
<!DOCTYPE html>
Untuk menata kedua elemen, buat file style.css di folder yang sama dengan HTML dan tambahkan yang berikut:
#box {button {
button:hover {
@keyframes rotateAndChangeColor {
Gaya ini membuat dua komponen:
Kotak sederhana yang berputar dan berubah warna saat halaman dimuat.
Tombol yang mengubah warna latar belakangnya saat Anda mengarahkan kursor ke atasnya.
Perhatikan bahwa kotak merah dianimasikan menggunakan arahan CSS @keyframe, sedangkan tombolnya menggunakan transisi. Ini memungkinkan Anda membandingkan kedua pendekatan menggunakan DevTools browser.
Untuk mengakses tab Animasi di Chrome DevTools:
Klik kanan halaman Anda untuk membuka menu konteks.
Klik Periksa.
Klik pada titik tiga di sudut kanan atas.
Navigasi ke Alat Lainnya > Animasi.
Ini akan membuka laci animasi di bagian bawah.
Animasi apa pun yang muncul di halaman Anda akan muncul di sini. Jika Anda menyegarkan halaman dan mengarahkan kursor ke tombol, animasi akan muncul di bawah tab animasi.
Kekuatan sebenarnya muncul ketika Anda mengklik salah satu animasi ini. Misalnya, jika Anda mengklik animasi kotak, Anda akan melihat browser menyajikan keyframe sebagai berikut:
DevTools menampilkan semua animasi yang berkaitan dengan elemen yang Anda pilih. Karena hanya ada satu animasi yang ditentukan untuk kotak merah—rotateAndChangeColor—Anda hanya akan melihat detailnya.
Anda dapat menyeret garis ke kiri untuk membuat animasi lebih cepat atau menyeretnya ke kanan untuk memperlambat animasi. Anda juga dapat menjeda animasi pada titik tertentu dengan mengaktifkan ikon jeda dan putar. Persentase di atas memungkinkan Anda memutar animasi masing-masing dengan seperempat kecepatan normal dan sepersepuluh kecepatannya.
Saat Anda memeriksa transisi tombol, DevTools akan menampilkan masing-masing properti transisi: warna dan warna latar belakang.
Alat ini memungkinkan Anda memanipulasi animasi untuk melihat cara kerjanya. Anda dapat menggunakannya untuk memecahkan masalah situs web Anda jika ada masalah.
Mulailah dengan mengganti markup dalam tag HTML
Anda dengan markup berikut:
<div class="move-me move-me-1">steps(4, end)</div>
Kemudian ganti semua gaya di file style.css Anda dengan ini:
.move-me {.move-me-1 {
.move-me-2 {
.move-me-3 {
body {
@keyframes move-in-steps {
100% {
Semua elemen
menerapkan animasi langkah demi langkah, yang mentransisikan posisi dan warna latar belakang. Selain itu, setiap kotak memiliki animasi berbeda untuk mengontrol jumlah langkah yang diambil.
Sementara kotak ketiga terus bergeser ke kanan, dua langkah pertama akan bergerak dua langkah sekaligus hingga semuanya mencapai ujung layar (dengan kotak kedua dimulai sebelum kotak pertama).
Jika Anda membuka tab Animasi di DevTools dan menyegarkan halaman, Anda akan menemukan semua informasi terkait animasi berikut:
Ada beberapa elemen yang semuanya bernyawa dalam periode yang sama. Dalam skenario ini, warna latar belakang dan posisi kotak dianimasikan secara bersamaan untuk ketiga kotak.
Hal lain yang perlu diperhatikan adalah node pada setiap baris animasi. Ketika animasi terjadi dalam jumlah tak terbatas, node menunjukkan di mana setiap pengulangan dimulai dan diakhiri dalam animasi.
Node kosong pada dasarnya adalah keyframe dalam animasi Anda, sedangkan node berwarna solid mewakili awal dan akhir animasi. Anda akan memiliki node berwarna gelap setiap kali animasi Anda dimulai.
Terakhir, Anda dapat mengedit animasi menggunakan DevTools, sama seperti yang Anda bisa lakukan dengan properti CSS lainnya. Semua perubahan yang Anda buat menggunakan UI animasi akan muncul dalam gaya sebaris di bawah tab Gaya, dan sebaliknya. Ini memungkinkan Anda membuat perubahan, mengujinya, dan menyalinnya ke proyek Anda yang sebenarnya.
Fitur DevTools di Google Chrome adalah alat luar biasa untuk men-debug CSS Anda, termasuk animasi. Ini memberikan tampilan mendetail tentang setiap transisi dan animasi di halaman Anda, sehingga Anda dapat melihat dengan tepat apa yang terjadi di setiap langkah.
Sebagai pengembang web, Anda pasti sudah familiar dengan fungsi DevTools browser Anda, atau yang setara.
