Halo teman-teman, kembali lagi di barajacoding.com. Di blog ini, seperti yang sudah tertera di judul, kita akan akan membahas animasi di CSS menggunakan Keyframes. Tapi sebelum membahas bagaimana cara menerapkan animasi, kita harus sadar terlebih dahulu mengapa diperlukan animasi.

Mengapa Animasi Penting?

Ketertarikan user terhadap tampilan halaman website kita sangat krusial dan menentukan masa depan web kita. Salah satu cara agar user tertarik dan ingin menetap di website kita selain karena konten adalah design dari halaman website itu sendiri. Mau itu dari segi penempatan elemen, penggunaan warna, atau–yang akan ditekankan di blog ini–interaktifitas user terhadap halaman web. Dan salah satu bentuk dari interaktifitas elemen pada halaman website kita adalah animasi. Ketika user men-klik sesuatu, meng-hover sebuah elemen, atau membuka panel pop-up ketika ada animasi, user akan terpana dan lebih tertarik lagi bermain atau ber-interaksi dengan website itu sendiri. Dan itulah poin penting mengapa penting untuk menerapkan animasi di produk digital terutama website.

Animasi di CSS

Animasi memungkinkan elemen secara bertahap berubah dari satu gaya ke gaya lainnya. Anda dapat mengubah properti CSS sebanyak yang Anda inginkan.

Ada banyak cara untuk bisa menerapkan animasi di website kita melalui css. Bisa melalui framework, library, atau properti-properti yang sudah disediakan. Dalam blog ini, kita akan menggunakan salah satu properti yang disediakan css secara default yaitu @keyframes.

Rule @Keyframes

Saat Anda menentukan gaya CSS di dalam rules @keyframes, animasi akan berubah secara bertahap dari gaya saat ini ke gaya baru pada waktu tertentu. Agar animasi berfungsi, Anda harus mengikat animasi ke elemen.

Contoh berikut mengikat animasi “contoh” ke elemen. Animasi akan berlangsung selama 4 detik, dan secara bertahap akan mengubah warna background elemen dari “merah” menjadi “kuning”:

// Elemen Container
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

// Animasi
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Hasil dari kode diatas adalah sebagai berikut:

Bisa dilihat dari video diatas, warna background box tersebut perlahan berubah dari merah menuju kuning dalam rentang waktu 4 detik. Ini salah satu contoh penggunaan animasi pada elemen di halaman website.

Tapi bagaimana jika kita ingin menambah pengaturan kepada animasi tersebut seperti menambah waktu animasi, atau ingin mengulang animasi jika sudah selesai, menambah delay kepada animasi, dll?

Jawabannya, CSS memiliki banyak properti untuk animasi yang khusus untuk menambah pengaturan kepada animasi. Mari lihat pengaturan animasi yang umum digunakan.

Properti Animation

animation-duration: Animation-duration (seperti namanya) menentukan berapa lama animasi ini akan berjalan. Satuan yang digunakan adalah s (second) dan ms (milisecond). Sebagai contoh ketika inigin menerapkan animasi berdurasi 4 detik, maka kita memberi nilai 4s kepada properti animation-duration.

animation-delay: Animation-delay menentukan jumlah waktu untuk menunggu dari menerapkan animasi ke elemen sebelum mulai melakukan animasi. Animasi dapat dimulai nanti, segera dari awal, atau segera dan setengah jalan melalui animasi.

Mungkin itu saja yang bisa dibahas di blog ini, semoga bermanfaat.

Referensi

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• https://www.w3schools.com/css/css3_animations.asp