Animasi CSS versus JavaScript

Anda dapat menganimasikan dengan CSS atau JavaScript. Mana yang harus Anda gunakan, dan mengapa?

Ada dua cara utama untuk membuat animasi di web: dengan CSS dan dengan JavaScript. Mana yang Anda pilih sangat bergantung pada dependensi lain dari proyek Anda, dan jenis efek apa yang ingin Anda capai.

Ringkasan

  • Gunakan animasi CSS untuk transisi "satu-kali" yang lebih sederhana, seperti mengganti status elemen UI.
  • Gunakan animasi JavaScript saat Anda ingin menggunakan efek lanjutan seperti memantul, berhenti, menjeda, memutar ulang, atau memperlambat.
  • Jika Anda memilih untuk membuat animasi dengan JavaScript, gunakan Web Animations API atau framework modern yang sesuai bagi Anda.

Kebanyakan animasi dasar dapat dibuat dengan CSS atau JavaScript, tetapi besaran tenaga dan waktunya berbeda (lihat juga Performa CSS vs JavaScript). Masing-masing memiliki kelebihan dan kekurangan, tetapi ini adalah panduan yang baik:

  • Gunakan CSS saat Anda memiliki status mandiri yang lebih kecil untuk elemen UI. Transisi dan animasi CSS ideal untuk menampilkan menu navigasi dari samping, atau menampilkan tooltip. Anda mungkin akhirnya menggunakan JavaScript untuk mengontrol status, tetapi animasinya sendiri akan berada di CSS Anda.
  • Gunakan JavaScript saat Anda membutuhkan kontrol yang signifikan atas animasi. Web Animations API adalah pendekatan berbasis standar yang saat ini tersedia di sebagian besar browser modern. Hal ini menyediakan objek nyata, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna ketika Anda perlu menghentikan, menjeda, memperlambat, atau membalikkan animasi Anda.
  • Gunakan requestAnimationFrame secara langsung saat Anda ingin mengorkestrasi seluruh adegan dengan tangan. Ini adalah pendekatan JavaScript lanjutan, namun dapat berguna jika Anda membangun sebuah game atau menggambar pada kanvas HTML.

Atau, jika sudah menggunakan framework JavaScript yang menyertakan fungsi animasi, seperti melalui metode .animate() jQuery atau TweenMax dari GreenSock, maka secara keseluruhan mungkin lebih praktis bagi Anda untuk tetap menggunakannya untuk animasi Anda.

Menganimasikan dengan CSS

Menganimasikan dengan CSS adalah cara paling sederhana untuk menggerakkan sesuatu di layar. Pendekatan ini dijelaskan sebagai deklaratif, karena Anda menentukan apa yang akan terjadi.

Di bawah ini adalah beberapa CSS yang memindahkan elemen 100px pada sumbu X dan Y. Hal ini dilakukan dengan menggunakan transisi CSS yang ditetapkan untuk menggunakan 500ms. Saat class move ditambahkan, nilai transform diubah dan transisi dimulai.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Cobalah

Selain durasi transisi, ada beberapa pilihan untuk easing, yaitu bagaimana animasi terasa. Untuk informasi selengkapnya tentang easing, lihat panduan Dasar-Dasar Easing.

Jika, seperti dalam cuplikan di atas, Anda membuat class CSS terpisah untuk mengelola animasi, Anda dapat menggunakan JavaScript untuk mengaktifkan dan menonaktifkan setiap animasi:

box.classList.add('move');

Melakukan hal ini akan memberikan keseimbangan yang bagus bagi aplikasi Anda. Anda bisa berfokus pada pengelolaan status dengan JavaScript, dan cukup menyetel class yang sesuai pada elemen target, membiarkan browser menangani animasi. Jika menggunakan cara ini, Anda dapat memproses peristiwa transitionend pada elemen, tetapi hanya jika Anda dapat mengabaikan dukungan untuk Internet Explorer versi lama; versi 10 adalah versi pertama yang mendukung peristiwa ini. Semua browser lain telah cukup lama mendukung peristiwa ini.

JavaScript yang diperlukan untuk memproses akhir transisi terlihat seperti ini:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Selain menggunakan transisi CSS, Anda juga bisa menggunakan animasi CSS, yang memberikan Anda kontrol lebih besar terhadap keyframe, durasi, dan iterasi animasi individual.

Misalnya, Anda dapat menganimasikan kotak dengan cara yang sama seperti transisi, tetapi menganimasikannya tanpa interaksi pengguna seperti klik, dan dengan pengulangan tak terbatas. Anda juga dapat mengubah beberapa properti secara bersamaan.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Cobalah

Dengan animasi CSS, Anda menentukan animasi itu sendiri secara terpisah dari elemen target, dan menggunakan properti animation-name untuk memilih animasi yang diperlukan.

Jika Anda ingin animasi CSS Anda berfungsi di browser lama, Anda perlu menambahkan awalan vendor. Banyak alat yang bisa membantu Anda membuat versi berawalan CSS yang Anda butuhkan, sehingga Anda bisa menulis versi tanpa awalan dalam file sumber.

Menganimasikan dengan JavaScript dan Web Animations API

Membuat animasi dengan JavaScript, jika dibandingkan, lebih kompleks daripada menulis transisi atau animasi CSS, tetapi biasanya memberikan lebih banyak kendali kepada developer. Anda dapat menggunakan Web Animations API untuk menganimasikan properti CSS tertentu atau membangun objek efek composable.

Animasi JavaScript sangat penting, karena Anda menulisnya secara inline sebagai bagian dari kode. Anda juga bisa membungkusnya di dalam objek lain. Berikut adalah JavaScript yang harus Anda tulis untuk membuat ulang transisi CSS yang dijelaskan sebelumnya:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Secara {i>default<i}, Animasi Web hanya memodifikasi presentasi elemen. Jika ingin objek tetap berada di lokasi pemindahannya, Anda harus mengubah gaya dasarnya saat animasi selesai, sesuai contoh kami.

Cobalah

Web Animations API adalah standar yang relatif baru dari W3C. Didukung secara native di sebagian besar browser modern. Untuk browser modern yang tidak mendukung, tersedia polyfill.

Dengan animasi JavaScript, Anda memiliki kontrol penuh atas gaya elemen dalam setiap langkahnya. Ini berarti Anda dapat memperlambat animasi, menjedanya, menghentikannya, membalikkannya, dan memanipulasi elemen sesuai keinginan Anda. Ini sangat berguna jika membangun aplikasi berorientasi objek yang kompleks, karena Anda bisa membungkus perilaku dengan baik.