Di tengah evolusi desain web, CSS animation muncul sebagai salah satu instrumen yang mampu mengubah cara kita berinteraksi dan menikmati konten di dunia maya. Dengan animasi CSS, setiap elemen di halaman web dapat bertransformasi, berputar, membesar, atau bahkan berubah warna, memberikan pengalaman yang lebih menarik bagi audiens.

Keberadaan animasi CSS bukan hanya sekedar estetika, melainkan kunci untuk meningkatkan keterlibatan audiens, memandu fokus mereka, dan pada akhirnya meningkatkan efektivitas komunikasi visual sebuah website.

Yuk, pelajari dasar-dasar dan cara membuat CSS animation di artikel berikut.

Dasar-dasar CSS Animation

Dalam CSS animation, ada dua komponen utama yang perlu kamu ketahui, keyframes dan properties.

• Keyframes digunakan untuk mendefinisikan tahapan-tahapan atau langkah-langkah spesifik dari animasi. Dengan kata lain, keyframes memungkinkan kamu menentukan bagaimana suatu elemen harus berubah sepanjang durasi animasi. Komponen ini bisa diibaratkan sebagai "titik kontrol" dalam animasi, di mana kamu menentukan perubahan apa yang terjadi pada titik-titik waktu tertentu.

Misalnya, kamu bisa menentukan bagaimana elemen harus bergerak dari titik A ke titik B, lalu ke titik C, dan seterusnya. Dengan keyframes, kamu dapat menciptakan gerakan yang smooth dan natural.

• Sementara itu, properties merujuk pada sifat-sifat atau atribut spesifik dari elemen yang akan diubah selama animasi berlangsung. Atribut ini bisa berupa opacity, posisi, warna, ukuran, transformasi, dan banyak lainnya. Dengan menentukan properties dalam keyframes, kamu bisa mengontrol bagaimana dan kapan perubahan tersebut terjadi.

Walaupun JavaScript juga bisa membuat animasi, animasi yang dibuat dengan CSS biasanya lebih ringan dibandingkan animasi yang dibuat dengan JavaScript. Namun, penting untuk diingat bahwa web tanpa animasi akan jauh lebih ringan dari web dengan animasi. Oleh karena itu, gunakan animasi dengan bijak dan seperlunya saja agar menjaga performa dan kecepatan website-mu.

Cara Membuat Animasi Sederhana dengan CSS

Berikut cara membuat animasi dengan CSS:

#1 Definisikan keyframes

Pertama, kamu perlu mendefinisikan keyframes untuk animasimu. Kamu harus menulis tahapan-tahapan gerakan yang akan dilalui elemen selama animasi berlangsung.

Contoh:

Dalam contoh di atas, kita membuat animasi dengan nama "namaAnimasi" yang akan mengubah opasitas elemen dari 0 (transparan) menjadi 1 (tak transparan).

#2 Terapkan animasi ke elemen

Setelah mendefinisikan keyframes, kamu bisa menerapkannya pada elemen yang diinginkan.

Contoh:

Di sini, kita menerapkan animasi "namaAnimasi" pada elemen dengan class .elemenYangDiAnimasi dan animasi tersebut akan berlangsung selama 2 detik.

#3 Tambahkan properti tambahan (opsional)

Kamu juga bisa menambahkan properti tambahan untuk mengontrol bagaimana animasi berlangsung, seperti animation-delay untuk menentukan keterlambatan sebelum animasi dimulai atau animation-iteration-count untuk menentukan berapa kali animasi harus diulang.

Dengan kode di atas, animasi akan dimulai setelah keterlambatan 1 detik dan akan diulang terus-menerus.

Perbedaan CSS Transitions vs. CSS Animations

CSS transitions maupun CSS animations adalah dua teknik yang sering digunakan untuk memberikan efek gerakan pada elemen web. Meskipun sama-sama membuat elemen bergerak dan berubah, ada perbedaan mendasar antara keduanya.

Pada dasarnya, pilihan antara menggunakan CSS transitions atau CSS animations tergantung pada kebutuhan dan kompleksitas efek yang ingin kamu capai. Untuk perubahan sederhana dan smooth, transitions mungkin lebih sesuai.

Namun, untuk animasi yang lebih detail dan dinamis, animations adalah pilihan tepat. Dengan memahami perbedaan dan kelebihan masing-masing, kamu bisa memaksimalkan potensi desain web-mu.

FAQ (Frequently Ask Question)

Apakah mungkin untuk menjeda atau memutar balik animasi CSS saat ada interaksi pengguna?

Ya, kamu dapat menggunakan properti animation-play-state untuk mengontrol apakah animasi sedang berjalan atau dijeda. Dengan mengatur value properti ini ke paused, kamu bisa menjeda animasi.

Sebagai contoh, kamu bisa menjeda animasi saat audiens mengarahkan kursor ke elemen dengan kode berikut:

Selain itu, untuk memutar balik animasi, kamu bisa memanfaatkan properti animation-direction dengan value reverse. Properti ini akan memutar balik urutan keyframes animasi.

Apakah animasi CSS bisa digunakan untuk animasi kompleks seperti animasi karakter atau pengembangan game?

Tentu saja, CSS animation dapat digunakan dalam pengembangan game sederhana, seperti game platformer ala Mario Bros, terutama saat dikombinasikan dengan JavaScript.

Namun, untuk animasi karakter yang lebih kompleks atau game dengan mekanisme lebih rumit, CSS animation bukanlah pilihan utama.

Alasannya adalah CSS animation lebih cocok untuk transisi dan animasi sederhana pada elemen web. Sementara untuk animasi karakter atau game yang memerlukan interaktivitas tinggi, kontrol rinci, dan respons cepat, teknologi lain seperti WebGL atau canvas dengan JavaScript lebih sesuai.

Penutup

CSS animation telah membuka pintu baru dalam desain web, memberikan “kehidupan” dan dinamika pada elemen-elemen yang sebelumnya statis. Dengan memahami konsep dasar seperti keyframes dan properties, kamu dapat menciptakan interaksi yang smooth dan menarik. Pada akhirnya, proses ini mampu meningkatkan keterlibatan audiens dan memperkaya pengalaman mereka saat menjelajahi web.