Properti CSS untuk Animasi

Melalui kelas ini, kamu diajak untuk:

• Mengidentifikasi properti-properti CSS untuk mengatur animasi

Pengantar

Di materi sebelumnya, kita telah memahami cara menggunakan keyframes. Kali ini, kita akan menyelami komponen animasi kedua, yaitu selector CSS. Seperti yang telah kita pahami, selector CSS bisa berbentuk class atau id dan diisi oleh properti-properti CSS. Dalam animasi, ada beberapa properti khusus yang akan kita ulas pada materi ini.

Properti-properti Animasi di CSS

Mari lihat kembali susunan kode keyframes dan selector CSS pada materi sebelumnya.

 
/* sintaksis untuk animasi */
@keyframes my-box {
        0%   {background-color: red; width: 110px;}
        25%  {background-color: green; width: 120px;}
        50%  {background-color: yellow; width: 130px;}
        75%  {background-color: blue; width: 140px;}
        100% {background-color: purple; width: 150px;}
}
/* selector class yang ingin diatur oleh animasi */
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 5s;
}

Jika dilihat, kita menemukan dua properti yang mungkin belum kita temui sebelumnya, yakni animation-name dan animation-duration. Keduanya adalah properti CSS yang wajib ada untuk mengatur animasi.

Ada setidaknya 7 properti umum untuk animasi.

animation-name (wajib)

Properti ini digunakan untuk menghubungkan selector class dengan kode animasi keyframes. Pastikan nilai properti ini sesuai dengan nama keyframes yang sudah kita atur. Di susunan kode di atas, animation-name diberikan nilai yang sama dengan nama @keyframes (my-box).

animation-duration (wajib)

Properti ini berfungsi untuk mengatur durasi animasi akan berjalan. Kita bisa menggunakan satuan detik dengan sintaksis 1s (1 detik), 10s (10 detik), 200s (200 detik), dst.

animation-iteration-count (opsional)

Properti ini digunakan untuk mengatur seberapa banyak animasi akan berjalan. Properti ini dapat diisi satuan angka, misal 1 (animasi dijalankan satu kali), 4 (animasi dijalankan empat kali), atau infinite (animasi akan terus berjalan dengan jumlah tak hingga).

 
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

animation-direction (opsional)

Properti ini berfungsi untuk mengatur arah berjalannya animasi. Nilai-nilai yang bisa diberikan meliputi:

• normal (maju) (default);
• reverse (terbalik);
• alternate (maju dulu, kemudian terbalik);
• alternate-reverse (terbalik dulu, baru maju).

Lihat contoh di bawah ini:

 
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

animation-delay (opsional)

Properti ini digunakan untuk menunda animasi dengan satuan waktu. Kita bisa memasukkan satuan detik seperti 1s, 5s, dst.

Lihat penulisan kode di bawah ini:

 
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-delay: 2s;
}

animation-timing-function (opsional)

Properti ini berfungsi untuk mengatur kecepatan animasi saat animasi diterapkan lebih dari satu kali. Nilai-nilai dalam properti ini adalah:

• ease (slow start, fast, end slowly);
• linear (kecepatan sama dari awal sampai akhir);
• ease-in (slow start);
• ease-out (slow-end);
• ease-in-out (slow start, slow end).

Lihat contoh susunan kodenya.

 
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
  animation-delay: 2s;
  animation-timing-function: ease-in-out;
}

Memasukkan Selector CSS ke HTML

Setelah mengatur selector CSS, kita tinggal memasukkan selector ke elemen HTML. Caranya sama seperti cara kita memasukkan selector CSS pada umumnya. Lihat contoh di bawah ini.

 
<div class="box_animation"></div>

Selayang Pandang

• CSS memiliki properti-properti khusus untuk mengatur animasi, dua di antaranya adalah properti wajib, yakni animation-name dan animation-duration.
• animation-name wajib digunakan untuk menghubungkan selector CSS dengan keyframes, sementara animation-duration harus digunakan untuk menentukan durasi animasi.