Belajar CSS - Transisi dan Animasi CSS

#Pendahuluan

Umpan balik visual yang halus membuat antarmuka terasa hidup. Episode 13 memperkenalkan state seperti :hover; episode 14 mengajarkan cara membuat perubahan state tersebut berjalan mulus melalui transition, dan menyusun gerakan berurutan yang utuh melalui animasi @keyframes. Animasi bukan sekadar dekorasi. Perpindahan yang halus memberi petunjuk apa yang berubah dan ke mana arahnya, mempercepat pemahaman pengguna terhadap antarmuka. Mengapa penting? Gerakan yang berlebihan justru mengganggu dan membuat sebagian pengguna mual. Keterampilan sesungguhnya adalah membuat animasi yang halus, singkat, dan menghormati preferensi gerak pengguna.

#Transisi Dasar

transition menghaluskan perubahan nilai properti dari satu state ke state lain:

transition.css

.tombol {
  background-color: #2563eb;
  transform: translateY(0);
  transition-property: background-color, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.tombol:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

Saat :hover aktif, warna dan posisi berubah selama 0.2 detik dengan kurva ease alih-alih melompat. Formulir ringkasnya adalah transition: background-color 0.2s ease.

timing.css

.cepat {
  transition: all 0.15s ease-in;
}
.mulus {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tunda {
  transition: opacity 0.2s ease 0.1s;
}

transition: all menyingkat namun menggerakkan semua properti; untuk kontrol, daftarkan properti secara eksplisit. Kurva cubic-bezier memberikan percepatan kustom, dan nilai terakhir adalah delay — waktu tunggu sebelum transisi dimulai.

#Transform dan Percepatan GPU

transform memindahkan elemen tanpa mengubah alur dokumen. Kombinasi transform dan opacity adalah kunci animasi yang mulus karena dijalankan pada kompositor, bukan memicu reflow:

transform.css

.modal { opacity: 0; transform: translateY(16px) scale(0.95); transition: opacity 0.2s ease, transform 0.2s ease; }
.modal.buka { opacity: 1; transform: translateY(0) scale(1); }
.kartu { transition: transform 0.2s ease; }
.kartu:hover { transform: rotate(1deg) scale(1.02); }

translate, scale, dan rotate digabung dalam satu transform. Animasi transform dan opacity berjalan pada kompositor sehingga tetap 60fps, sementara animasi width, top, atau margin memaksa browser menghitung ulang layout di setiap frame.

#Animasi dengan @keyframes

Untuk gerakan berurutan yang tidak bergantung pada state, gunakan @keyframes bersama animation:

keyframes.css

@keyframes muncul {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pesan {
  animation: muncul 0.4s ease-out both;
}

from dan to mendefinisikan keadaan awal dan akhir. Nilai both memakai gaya from sebelum animasi dimulai dan to setelah selesai, mencegah elemen berkedip.

keyframes-2.css

@keyframes denyut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
.spinner {
  animation: denyut 1s ease-in-out infinite;
}

Dengan persentase, kalian bisa mendefinisikan banyak tahapan. infinite mengulang tanpa henti — umum untuk spinner dan indikator pemuatan.

#Properti Animation dan Kontrol

Berbagai properti animation memberi kontrol penuh atas perilaku gerakan:

animation-prop.css

.loader {
  animation-name: denyut;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-fill-mode: both;
}
.paused {
  animation-play-state: paused;
}

animation-direction: alternate membalik arah tiap pengulangan — efek naik-turun yang alami. animation-play-state bisa dipakai menghentikan animasi dari JavaScript atau :hover tanpa menulis ulang keyframes.

#Menghormati Prefers-Reduced-Motion

Sebagian pengguna menonaktifkan animasi di sistem operasi. Media query prefers-reduced-motion memungkinkan kalian mematikan gerakan:

reduced-motion.css

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .banner-berjalan {
    animation: none;
  }
}

Pola pertama mempercepat semua transisi dan animasi hingga nyaris instan. Pola kedua mematikan animasi dekoratif yang tidak penting. Keduanya membuat antarmuka tetap berfungsi penuh bagi pengguna yang sensitif terhadap gerak.

#Latihan: Tombol dengan Umpan Balik

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Animasi Tombol</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <button class="tombol">Kirim</button>
    <div class="badge">Terkirim</div>
  </body>
</html>

css/style.css

body { font-family: system-ui, sans-serif; padding: 48px; }
.tombol { padding: 12px 24px; border: none; border-radius: 8px; background-color: #2563eb; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
.tombol:hover { background-color: #1d4ed8; transform: translateY(-2px); }
.tombol:active { transform: translateY(0); transition-duration: 0.05s; }
.badge { display: inline-block; margin-top: 16px; padding: 8px 12px; border-radius: 6px; background-color: #dcfce7; color: #166534; opacity: 0; animation: muncul 0.4s ease-out both; }
@keyframes muncul { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

Jalankan npx serve . dan rasakan perbedaan tombol yang langsung berubah versus yang bergerak halus. Aktifkan pengaturan pengurangan gerak di sistem lalu muat ulang — transisi menjadi instan namun tetap berfungsi.

#Kesalahan Umum dan Solusinya

#Animasi Property yang Mahal

Menganimasikan width, height, atau margin memicu reflow setiap frame. Gunakan transform dan opacity untuk performa mulus.

#Transisi Tidak Jalan

Transisi butuh perbedaan nilai antar state dan properti yang terdaftar di transition-property. Pastikan state hover memodifikasi properti yang sama dengan awalnya.

#Gerakan Berlebihan

Terlalu banyak animasi mengganggu fokus dan membuat halaman terasa lambat. Terapkan gerakan secara hemat, singkat, dan selalu hormati prefers-reduced-motion.

#Penutup

Inti yang harus dibawa pulang:

• transition menghaluskan perubahan antar state dalam durasi dan kurva tertentu.
• transform dan opacity adalah properti paling aman untuk performa.
• @keyframes mendefinisikan gerakan berurutan; animation menjalankannya.
• animation-fill-mode, direction, dan iteration-count memberi kontrol penuh.
• animation-play-state menghentikan gerakan tanpa menulis ulang keyframes.
• Hormati prefers-reduced-motion untuk aksesibilitas gerak. Di episode 15 selanjutnya kita akan membahas custom properties dan tema berbasis variabel — menyimpan nilai warna dan spacing sekali pakai lalu bertukar tema secara dinamis.