Cara Membuat Animasi dengan CSS

Animasi membuat website terasa lebih hidup dan interaktif. CSS menyediakan dua cara utama untuk membuat animasi: transition untuk animasi sederhana saat perubahan state, dan @keyframes untuk animasi yang lebih kompleks dan berulang. Artikel ini akan membahas keduanya dengan contoh kode yang bisa langsung kamu gunakan.

CSS Transition: Animasi Sederhana

CSS Transition digunakan untuk menganimasikan perubahan nilai properti CSS dari satu state ke state lain, misalnya saat hover. Properti transition memiliki empat nilai:

• property — properti CSS yang akan dianimasikan
• duration — durasi animasi (dalam detik)
• timing-function — kurva kecepatan animasi
• delay — jeda sebelum animasi mulai

.tombol {
  background-color: #3b82f6;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tombol:hover {
  background-color: #1d4ed8; /* berubah warna saat hover */
}

Transition untuk Beberapa Properti

.kartu {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kartu:hover {
  transform: translateY(-8px); /* naik ke atas */
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Atau gunakan 'all' untuk semua properti */
.elemen {
  transition: all 0.3s ease;
}

---

Artikel ini ditampilkan sebagian. Untuk pembahasan selengkapnya, beserta contoh dan langkah detailnya, Anda dapat membacanya pada sumber aslinya:

Cara Membuat Animasi dengan CSS

Tutorial pemrograman dan tools developer lainnya juga tersedia di dhiecoderweb.com.