Pengenalan Keyframes

Melalui kelas ini, kamu diajak untuk:

• Mengenal sintaksis yang digunakan untuk mendeklarasikan keyframes.
• Mengidentifikasi parameter-parameter perubahan style dalam keyframes.
• Mengatur dua atau lebih style elemen dalam satu deklarasi keyframes.

Sintaksis Keyframes

Seperti yang sudah disinggung di materi sebelumnya, animasi memiliki dua komponen wajib, yaitu keyframes dan selector CSS. Lihat contoh sintaksis keduanya di bawah ini.

 
/* sintaksis untuk animasi */
@keyframes my-box {
  from {background-color: red;}
  to {background-color: blue;}
}
/* selector class yang ingin diatur oleh animasi */
.box_animation {
  width: 50px;
  height: 50px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 6s;
}

Perhatikan susunan kode @keyframes di atas. Dapat kita lihat bahwa keyframes dideklarasikan dengan menggunakan: @keyframes nama-animasi {parameter 1 {properti:nilai;} parameter 2 {properti:nilai:}}.

Parameter-parameter dalam Keyframes

Pada contoh di atas, kita menggunakan from dan to untuk parameter perubahan style. Keyframes menyediakan beberapa cara menentukan parameter untuk mengatur parameter perubahan style.

From dan To

From (parameter 1) dan To (parameter 2) digunakan untuk mengubah style awal ke style akhir. Misal kita menggunakan susunan kode ini.

 
/* sintaksis untuk animasi */
@keyframes my-box {
  from {background-color: red;}
  to {background-color: blue;}
}
/* selector class yang ingin diatur oleh animasi */
.box_animation {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: my-box;
  animation-duration: 6s;
}

Dari susunan kode tersebut, .box_animation akan berubah warna dari merah menjadi biru dalam durasi waktu 6 detik. Durasi ini diatur dalam selector class .box_animation, spesifiknya pada properti animation-duration.

Persentase

Selain from dan to, kita juga bisa menggunakan persentase. Persentase dapat kita gunakan ketika kita ingin membuat perubahan style lebih dari satu kali sesuai durasi waktu yang ditetapkan. Lihat contohnya di bawah ini.

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

Susunan kode di atas akan membuat warna kotak berubah secara gradual sebanyak enam kali dengan durasi 6 detik.

Mengatur Dua atau Lebih Style dalam Keyframes

Kita tidak hanya dapat mengatur satu style saja. Di susunan kode sebelumnya, kita hanya mengatur perubahan warna kotak. Misal kita juga ingin mengubah lebar kotak. Lihat susunan kode di bawah ini.

 
@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: 160px;}
    }

Dapat dilihat, kita hanya perlu memisahkan tiap style dengan tanda (;). Kita bisa menambahkan style sebanyak yang kita butuhkan, misal height atau border.

Selayang Pandang

• Keyframes memiliki dua parameter umum menentukan waktu style akan berubah secara gradual, yakni from-to dan persentase (%).
• Dalam menggunakan animasi, kita bisa menambah properti style sebanyak yang kita mau sesuai kebutuhan dalam satu deklarasi keyframes.