ANIMASI CSS

Animasi CSS memainkan peran penting dalam desain web, memungkinkan elemen-elemen di halaman web untuk bergerak dalam pola yang telah ditentukan. Dalam panduan ini, kamu akan belajar bagaimana menggunakan Animasi CSS untuk memberikan sentuhan dinamis pada halaman web kamu.

Dasar-Dasar Animasi CSS

Animasi CSS adalah fitur yang memungkinkan perubahan properti CSS secara bertahap, bukan seketika. Ada dua komponen penting dalam Animasi CSS: @keyframes dan animation property.

@Keyframes

@keyframes digunakan untuk mendefinisikan pola animasi. Kamu bisa menentukan style CSS di berbagai titik waktu dalam siklus animasi, yang dapat berlangsung sebanyak yang kamu butuhkan.

Berikut adalah contoh kode dasar penggunaan @keyframes:

@keyframes namaAnimasi {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

Animation Property

Property animation digunakan untuk mengontrol berbagai aspek waktu dan perilaku animasi. Ada beberapa properti yang dapat diatur, termasuk durasi animasi, jumlah iterasi, dan penundaan sebelum animasi dimulai.

Berikut adalah contoh penggunaan properti animation:

div {
  animation-name: namaAnimasi;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

Menerapkan Animasi CSS

Untuk menerapkan animasi CSS, cukup tambahkan kode CSS yang relevan ke elemen yang ingin kamu animasi. Pastikan bahwa kamu sudah mendefinisikan @keyframes dengan nama yang sesuai.

Berikut contoh lengkap penerapan Animasi CSS:

@keyframes namaAnimasi {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: namaAnimasi;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

Dalam contoh di atas, kotak div akan berubah warna dari merah ke kuning hingga hijau, dan animasi tersebut akan berulang tanpa batas.

Kesimpulan

Dengan memahami dasar-dasar Animasi CSS dan bagaimana cara menerapkannya, kamu dapat menambahkan gerakan dan dinamisme ke halaman web kamu. Latihan, eksperimentasi, dan kreativitas adalah kunci untuk memanfaatkan sepenuhnya potensi Animasi CSS.