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;
}

Timing Function yang Tersedia

.animasi-1 { transition: all 0.3s ease; }        /* percepat lalu perlambat */
.animasi-2 { transition: all 0.3s linear; }      /* konstan */
.animasi-3 { transition: all 0.3s ease-in; }     /* mulai lambat */
.animasi-4 { transition: all 0.3s ease-out; }    /* akhir lambat */
.animasi-5 { transition: all 0.3s ease-in-out; } /* keduanya lambat */
.animasi-6 { transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* kustom */

CSS Animation dengan @keyframes

Untuk animasi yang lebih kompleks dan berulang, gunakan @keyframes. Pertama definisikan keyframe, lalu terapkan pada elemen:

/* Definisi keyframe */
@keyframes putar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Penerapan */
.ikon-loading {
  animation: putar 1s linear infinite;
}

Keyframe dengan Beberapa Tahap

@keyframes denyut {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.tombol-penting {
  animation: denyut 1.5s ease-in-out infinite;
}

Properti animation

.elemen {
  animation-name: denyut;         /* nama keyframe */
  animation-duration: 2s;         /* durasi */
  animation-timing-function: ease; /* kurva */
  animation-delay: 0.5s;          /* jeda awal */
  animation-iteration-count: infinite; /* jumlah pengulangan */
  animation-direction: alternate;  /* bolak-balik */
  animation-fill-mode: forwards;   /* pertahankan state akhir */

  /* Shorthand */
  animation: denyut 2s ease 0.5s infinite alternate forwards;
}

Contoh Praktis: Animasi Fade In

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.muncul {
  animation: fadeIn 0.5s ease forwards;
}

/* Delay bertahap untuk list */
.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }

Contoh Praktis: Loading Spinner

<div class="spinner"></div>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
</style>

Contoh: Animasi Ketikan Teks

@keyframes ketik {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes kedip-kursor {
  50% { border-color: transparent; }
}

.teks-ketik {
  font-family: monospace;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #3b82f6;
  width: fit-content;
  animation:
    ketik 3s steps(30) forwards,
    kedip-kursor 0.7s step-end infinite;
}

Tips Membuat Animasi CSS

• Animasikan properti transform dan opacity untuk performa terbaik — keduanya tidak memicu reflow.
• Gunakan will-change: transform pada elemen yang sering dianimasikan untuk optimasi.
• Hormati preferensi pengguna dengan @media (prefers-reduced-motion: reduce) — matikan animasi untuk pengguna yang sensitif.
• Jangan berlebihan — animasi yang terlalu banyak akan mengganggu pengalaman pengguna.

Kesimpulan

CSS menyediakan dua cara powerful untuk membuat animasi: transition untuk efek sederhana saat interaksi, dan @keyframes animation untuk animasi yang lebih kompleks dan berulang. Dengan menguasai keduanya, kamu bisa membuat tampilan website yang lebih menarik dan interaktif tanpa perlu library JavaScript. Mulai dari efek hover sederhana hingga loading spinner, semuanya bisa dilakukan dengan CSS murni.