Kunci Animasi keyframes

Dalam CSS, Kunci Animasi (atau Keyframes) adalah alat yang kuat untuk membuat animasi dalam halaman web Anda. Ini memungkinkan Anda untuk mengendalikan bagaimana elemen-elemen HTML berubah dari satu keadaan ke keadaan lainnya selama animasi.

Langkah 1: Menentukan Kunci Animasi (Keyframes)

Pertama, Anda perlu menentukan kunci animasi dengan menggunakan @keyframes. Anda dapat memberinya nama apa saja yang Anda inginkan. Berikut adalah contoh kunci animasi dengan nama "muncul":

@keyframes muncul {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Dalam contoh ini, kita mendefinisikan kunci animasi "muncul" yang akan mengubah elemen dari keadaan awal (0% atau from) dengan opacity: 0 hingga keadaan akhir (100% atau to) dengan opacity: 1.

Langkah 2: Menggunakan Kunci Animasi dalam Elemen HTML

Selanjutnya, Anda dapat menggunakan kunci animasi yang telah Anda buat dalam elemen HTML yang ingin Anda animasikan. Misalnya, jika Anda ingin menganimasikan sebuah kotak div, Anda dapat melakukannya seperti ini:

#kotak-animasi {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: muncul; /* Menggunakan kunci animasi "muncul" */
  animation-duration: 2s; /* Durasi animasi (dalam detik) */
}

Di sini, kita menggunakan animation-name untuk menghubungkan kunci animasi "muncul" ke elemen dengan ID "kotak-animasi". animation-duration mengatur berapa lama animasi akan berlangsung.

Langkah 3: Memulai Animasi

Terakhir, Anda perlu memulai animasi. Anda dapat melakukannya dengan berbagai cara, misalnya dengan menggunakan animation shorthand property:

#kotak-animasi {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: muncul 2s ease-in-out infinite; /* Memulai animasi */
}

Dalam contoh ini, kita menggunakan animation dengan nama kunci animasi "muncul", durasi 2 detik, jenis pengulangan (ease-in-out), dan pengulangan tak terbatas (infinite).

Sekarang, elemen dengan ID "kotak-animasi" akan muncul dengan animasi yang telah Anda tentukan.

Itu dia! Ini adalah dasar-dasar animasi CSS dengan menggunakan kunci animasi (keyframes). Anda dapat menyesuaikan kunci animasi dan properti animasi lainnya sesuai dengan kebutuhan Anda untuk menciptakan animasi yang menarik dalam halaman web Anda.

PREVIOUS
NEXT