Animasi: CSS transition + rAF

Trigger CSS transition dari JS + requestAnimationFrame.

Pahami konsepnya

Cara termudah menganimasikan: trigger CSS transition dari JavaScript. Definisikan transition di CSS (.kotak { transition: transform 0.3s ease; }) lalu ubah properti dari JS (kotak.style.transform = "translateX(100px)"). Browser menghaluskan perpindahan secara otomatis.

requestAnimationFrame(fn) menjadwalkan fn sebelum frame berikutnya dipaint — sinkron dengan refresh rate layar (60fps). Gunakan untuk animasi yang butuh kontrol per-frame: permainan, canvas, parallax. rAF lebih efisien daripada setInterval karena berhenti saat tab tidak aktif.

CSS animation (@keyframes) dipicu dengan classList.add("kelas-animasi"). JavaScript menambah kelas, CSS menjalankan keyframes. Ini pola yang paling bersih: JS mengatur KAPAN, CSS mengatur BAGAIMANA.

Coba contoh kode

<!doctype html>
<html>
<head>
  <style>
    .kotak {
      width: 60px; height: 60px;
      background: teal;
      transition: transform 0.3s ease, background 0.3s;
    }
    .geser { transform: translateX(150px) rotate(45deg); background: orange; }
  </style>
</head>
<body>
  <div class="kotak"></div>
  <button id="btn">Animasikan</button>

  <script>
    const kotak = document.querySelector(".kotak");
    document.getElementById("btn").addEventListener("click", () => {
      kotak.classList.toggle("geser");
    });
  </script>
</body>
</html>

CSS transition mendefinisikan BAGAIMANA animasi terjadi (0.3s ease); JavaScript toggle kelas .geser mengatur KAPAN. Kotak meluncur 150px sambil berputar dan berganti warna — semua dihaluskan browser.

Latihan singkat

Uji: simulasi animasi — toggle kelas "geser" mengubah posisi dari 0 ke 150.