KEYFRAMES ANIMASI

Seiring berkembangnya teknologi web, CSS tidak hanya merupakan media untuk merapikan halaman web, tetapi juga memiliki kemampuan untuk menghidupkan halaman web dengan fungsi animasi. Salah satu fitur CSS yang memungkinkan ini adalah keyframes.

Keyframes animasi CSS

Keyframes adalah fitur dalam CSS yang memungkinkan kamu untuk melakukan perubahan gaya berulang pada elemen sepanjang waktu, sehingga menciptakan animasi. Sebut saja seperti efek parallax scrolling, animasi teks, atau pun transisi sederhana.

Keyframe animasi dideklarasikan dalam CSS dengan aturan @keyframes, diikuti oleh nama animasi, dan blok perintah yang mendefinisikan perubahan gaya pada elemen.

Berikut adalah struktur dasar dari keyframes:

@keyframes nama-animasi {
 0% {
   properti1: nilai;
   properti2: nilai;
 }
 50% {
   properti1: nilai;
   properti2: nilai;
 }
 100% {
   properti1: nilai;
   properti2: nilai;
 }
}

Dalam contoh di atas, 0%, 50%, dan 100% adalah ‘keyframes’ atau ‘kerangka kunci’ yang akan dilalui animasi. Nilai persentase ini dapat diubah dan ditambah, dan kamu juga bisa menggunakan kata kunci seperti from (ekuivalen dengan 0%) dan to (ekuivalen dengan 100%).

Menggunakan Keyframes dalam CSS

Setelah mendefinisikan keyframe, kamu bisa menerapkannya pada elemen yang diinginkan dalam CSS menggunakan properti animation-name dan animation-duration.

Contoh:

div {
 animation-name: nama-animasi;
 animation-duration: 5s;
}

Dalam contoh tersebut, animasi yang telah didefinisikan dalam @keyframes dengan nama “nama-animasi” akan diterapkan pada elemen <div> dengan durasi 5 detik.

Pengaturan Tambahan Untuk Animasi

Ada beberapa properti tambahan yang dapat kamu gunakan untuk mengendalikan animasi, seperti animation-delay (untuk menentukan jeda sebelum animasi dimulai), animation-iteration-count (untuk menentukan berapa kali animasi harus diulangi), dan animation-fill-mode (untuk menentukan bagaimana animasi berperilaku sebelum dan setelah pelaksanaannya).

Contoh:

div {
 animation-name: nama-animasi;
 animation-duration: 5s;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-fill-mode: forwards;
}

Dalam contoh di atas, animasi dimulai dengan jeda 2 detik, berulang tak terbatas, dan akan berhenti di frame terakhir ketika animasi selesai (forwards).

Seiring dengan berkembangnya kemampuan HTML dan CSS, berbagai macam efek visual yang menarik dapat kamu ciptakan untuk membuat website yang interaktif dan menarik. Mulailah bereksperimen dengan keyframes dan lihatlah apa yang bisa kamu capai!