Animasi Keyframe CSS dengan React

Aturan @keyframes menjelaskan animasi bertahap dengan menetapkan nilai properti pada berbagai titik di sepanjang garis waktu, menggunakan from/to atau persentase seperti 0%, 50%, dan 100%.

Tidak seperti transisi, aturan bingkai kunci dapat menjelaskan gerakan kompleks dalam beberapa tahap yang berjalan sendiri tanpa perubahan status pada setiap langkah.

Anda menerapkan sekumpulan bingkai kunci dengan properti animation: animation: slideIn 400ms ease forwards. Properti ini menggabungkan nama, durasi, fungsi pengaturan waktu, dan mode pengisian.

Mode pengisian forwards mempertahankan elemen pada nilai bingkai kunci terakhir setelah animasi berakhir, sehingga mencegahnya tiba-tiba kembali ke posisi awal.

Dalam React, biasanya Anda menambahkan kelas yang membawa deklarasi animation saat status menjadi benar. Misalnya, menambahkan is-entering memulai animasi bingkai kunci saat elemen dipasang atau sebuah penanda berubah.

Hal ini menjaga logika animasi tetap berada di CSS, sementara React hanya menentukan kapan kelas tersebut dipasang.

animation-fill-mode mengontrol gaya yang diterapkan sebelum dan sesudah animasi berjalan. forwards mempertahankan bingkai kunci terakhir, backwards menerapkan bingkai kunci pertama selama jeda apa pun, dan both melakukan keduanya.

Tanpa forwards, elemen yang dianimasikan menuju keadaan tampak akan kembali menjadi tidak terlihat saat animasi selesai.

animation-direction: alternate memutar animasi maju lalu mundur pada setiap iterasi. Jika digabungkan dengan animation-iteration-count: infinite, properti ini menghasilkan gerakan maju-mundur yang halus seperti efek berdenyut atau bernapas.

Hal ini berguna untuk indikator pemuatan atau gerakan halus yang menarik perhatian.

animation-play-state dapat berupa running atau paused. Anda dapat mengendalikannya dari status React, misalnya menjeda teks berjalan saat kursor diarahkan ke sana dengan mengganti kelas.

Karena animasi dijeda, bukan diatur ulang, animasi dilanjutkan tepat dari posisi saat berhenti.

Animasi bingkai kunci hanya diputar sekali saat kelasnya pertama kali diterapkan; menambahkan kembali kelas yang sama tidak akan memulainya lagi. Trik React yang paling bersih adalah mengubah key elemen agar React memasang ulang simpul baru dan memutar animasi dari awal.

Misalnya, key={count} pada notifikasi memasangnya ulang setiap kali count bertambah.

Beberapa pengguna mengaktifkan gerakan yang dikurangi di OS mereka demi kenyamanan atau aksesibilitas. Bungkus animasi yang tidak esensial dalam @media (prefers-reduced-motion: reduce), lalu nonaktifkan atau persingkat animasi tersebut di sana.

Menghormati preferensi ini membuat antarmuka Anda lebih inklusif dan mencegah munculnya rasa tidak nyaman.

Untuk menganimasikan elemen saat memasuki area pandang, gunakan IntersectionObserver dalam useEffect. Saat entri menjadi terlihat, Anda mengatur status, yang kemudian menambahkan kelas animasi.

Dengan cara ini, Anda mendapatkan efek kemunculan saat menggulir tanpa pendengar pengguliran berat yang berjalan di setiap bingkai.

animation-delay mengatur perbedaan waktu dimulainya setiap animasi bingkai kunci. Memberikan jeda yang semakin panjang pada daftar item membuatnya beranimasi secara berurutan sehingga menghasilkan kemunculan yang teratur.

Anda dapat menghitung jeda setiap item di React dengan style={{ animationDelay: i * 80 + 'ms' }}.

Gunakan transisi untuk perubahan sederhana antara dua status yang dipicu oleh interaksi, dan gunakan bingkai kunci saat Anda memerlukan gerakan bertahap, pengulangan, atau animasi yang berjalan secara independen dari perubahan status.

Keduanya murni berupa CSS, jadi React hanya menentukan kapan kelas diterapkan dan peramban menangani bingkainya.

Uji pemahaman Anda tentang perilaku bingkai kunci.

Anda telah mempelajari cara mendefinisikan @keyframes, menerapkannya dengan singkatan animation, mengontrol mode pengisian dan arah, menjeda serta memicu ulang animasi, dan menampilkan elemen saat menggulir dengan IntersectionObserver.

Anda juga telah melihat cara menghormati prefers-reduced-motion untuk menghasilkan gerakan yang aksesibel.