RULE CSS @keyframes digunakan untuk mendefinisikan perilaku satu siklus animasi CSS.

Animasi mirip dengan transisi karena mengubah nilai presentasional properti CSS dari waktu ke waktu. Perbedaan utama adalah bahwa sementara transisi memunculkan secara implisit ketika nilai properti berubah (misalnya, ketika nilai properti berubah pada hover), animasi dieksekusi secara eksplisit ketika properti animasi diterapkan. Karena itu, animasi membutuhkan nilai eksplisit untuk properti yang dianimasikan. Nilai-nilai ini didefinisikan menggunakan keyframes animasi yang ditentukan dalam aturan RULE CSS @keyframes. Jadi, RULE CSS @keyframes terdiri dari CSS yang diuraikan yang menggambarkan nilai properti berubah dari waktu ke waktu.

Kemudian, dengan menggunakan properti animasi CSS yang berbeda, banyak aspek animasi dapat dikontrol, termasuk berapa kali animasi iterates, apakah atau tidak bergantian antara nilai awal dan akhir, dan apakah atau tidak animasi harus berjalan atau berhenti. Animasi juga dapat menunda waktu mulainya.

Untuk menentukan animasi, harus dimulai dengan aturan @keyframes. Aturan RULE CSS @keyframe yang terdiri dari kata kunci “@keyframes”, diikuti oleh pengidentifikasi yang memberi nama untuk animasi (yang akan direferensikan menggunakan nama-animasi), diikuti oleh serangkaian aturan CSS (yang dibatasi oleh tanda kurung kurawal). Animasi kemudian diterapkan ke elemen dengan menggunakan identifier sebagai nilai untuk properti animasi-nama. Sebagai contoh:

 

Apa saja yang termasuk ke dalam @keyframes?

Yang termasuk ke dalam RULE CSS @keyframes (di dalam kurung kurawal) adalah ketika kita menentukan bingkai utama, atau titik jalan, yang menentukan nilai untuk properti yang di animasikan, pada titik-titik tertentu selama animasi. Ini memungkinkan untuk mengontrol langkah-langkah perantara dalam serangkaian animasi. Misalnya, animasi sederhana @keyframe mungkin terlihat seperti ini:

 

‘0%’ dan ‘100%’ adalah pemilih bingkai utama yang masing-masing menetapkan aturan mainframe. Blok deklarasi keyframe untuk aturan mainframe terdiri dari properti dan nilai.

Animasi di atas mirip dengan efek transisi sederhana: warna latar animasi dari satu nilai di awal animasi (0%) hingga mencapai nilai lain di akhir animasi (100%). Penyusun keyframe ‘0%’ dan ‘100%’ menentukan titik arah, atau persentase poin dalam waktu, yang diinginkan agar properti beranimasi mengubah nilai. Kita juga dapat menggunakan kata kunci lainnya tidak hanya menggunakan 0% dan 100%. Sebagai contoh:

Disini kita menggunakan kata kunci pemilih from dan to:

Pemilih mainframe terdiri dari satu atau beberapa nilai persentase yang dipisahkan koma atau dari dan ke kata kunci. Perlu diperhatikan bahwa penentu satuan persentase harus digunakan pada nilai persentase. Oleh karena itu, ‘0’ adalah pemilih bingkai utama yang tidak valid.

Happy Coding!