Membuat Animasi Bergerak dengan CSS Keyframes (@keyframes)

Sutradara Film di dalam CSS

Di artikel sebelumnya kita sudah belajar CSS transition. Transition ibarat saklar lampu: ia hanya aktif saat ada pemicu (seperti klik atau hover). Tapi, bagaimana jika kamu ingin membuat animasi Loading Spinner yang terus berputar berulang-ulang dari detik pertama website dibuka sampai kiamat? Kamu membutuhkan sutradara bernama CSS @keyframes.

Cara Kerja Keyframes (Rangkaian Persentase)

Dalam pembuatan film animasi, Keyframe adalah bingkai-bingkai gambar utama yang menentukan titik awal dan titik akhir gerakan. Konsep ini persis diadopsi oleh CSS.

Kamu membagi durasi waktu animasi dari 0% (Awal) hingga 100% (Akhir), lalu menentukan gaya CSS apa yang harus terjadi di tiap titik tersebut.

Contoh 1: Membuat Teks Berkedip Pudar (Fading)

/* 1. Mendaftarkan skenario animasinya */
@keyframes kedapKedip {
  0% { opacity: 1; }      /* Awal: Terang benderang */
  50% { opacity: 0.2; }   /* Tengah jalan: Meredup nyaris hilang */
  100% { opacity: 1; }    /* Akhir: Kembali terang */
}

Menyambungkan Animasi ke Elemen HTML

Setelah "skenario"-nya dibuat, kamu harus menugaskan seorang "Aktor" (elemen HTML) untuk memainkan peran tersebut menggunakan properti animation.

/* 2. Menyuruh elemen memainkan animasinya */
.peringatan {
  color: red;
  /* Format: nama-animasi durasi perulangan */
  animation: kedapKedip 2s infinite;
}

Kode di atas artinya: "Hei teks peringatan, mainkan skenario 'kedapKedip' dalam waktu 2 detik dari awal ke akhir, dan ulangi terus tanpa batas waktu (infinite)."

Contoh 2: Membuat Loading Spinner Berputar

Ini adalah salah satu trik paling sering digunakan oleh Frontend Developer untuk membuat tanda Loading sendiri tanpa men-download file gambar GIF yang berat.

@keyframes putaranMaut {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } /* Berputar satu lingkaran penuh */
}

.loading-ring {
  width: 50px;
  height: 50px;
  border: 5px solid lightgrey;
  border-top: 5px solid blue; /* Hanya garis atas yang biru */
  border-radius: 50%; /* Membuat kotak jadi lingkaran sempurna */
  
  /* Mainkan putaran 1 detik secara linier (stabil/tak melambat) terus menerus */
  animation: putaranMaut 1s linear infinite;
}

Tips Performa GPU

Sama seperti Transition, aturan performa untuk Keyframes juga berlaku keras: Usahakan hanya menganimasikan properti transform (seperti translate, rotate, scale) dan opacity. Menggunakan keyframes untuk menganimasikan posisi top atau margin-left akan membuat proses rendering browser patah-patah dan membuat HP pengunjung menjadi sangat panas.