Animasi CSS versus JavaScript

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

Paul Lewis

Sam Thorogood

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 mengubah status elemen UI.
• Gunakan animasi JavaScript ketika Anda ingin menggunakan efek lanjutan seperti memantul, menghentikan, menjeda, memutar ulang, atau memperlambat.
• Jika Anda memilih untuk menganimasikan dengan JavaScript, gunakan Web Animations API atau kerangka kerja modern yang nyaman bagi Anda.

Kebanyakan animasi dasar dapat dibuat dengan CSS atau JavaScript, tetapi jumlah tenaga dan waktu yang diperlukan berbeda (lihat juga Kinerja CSS vs JavaScript). Masing-masing memiliki pro dan kontra, tetapi ini adalah panduan yang bagus:

• 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 akan ada di CSS.
• Gunakan JavaScript jika Anda memerlukan kontrol yang signifikan atas animasi. Web Animations API adalah pendekatan berbasis standar, saat ini tersedia di sebagian besar browser modern. Ini memberikan objek nyata, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna ketika Anda perlu berhenti, menjeda, melambatkan, atau membalikkan animasi.
• Gunakan requestAnimationFrame secara langsung jika Anda ingin mengatur seluruh tampilan dengan tangan. Ini adalah pendekatan JavaScript lanjutan, tetapi dapat berguna jika Anda membuat game atau menggambar pada kanvas HTML.

Atau, jika Anda sudah menggunakan framework JavaScript yang menyertakan fungsi animasi, seperti melalui metode .animate() jQuery atau TweenMax GreenSock, Anda mungkin merasa lebih nyaman dengan tetap menggunakannya untuk animasi Anda.

Menganimasikan dengan CSS

Menganimasikan dengan CSS adalah cara paling sederhana untuk menggerakkan sesuatu di layar. Pendekatan ini digambarkan 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 disetel untuk menggunakan 500ms. Saat class move ditambahkan, nilai transform akan berubah 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 memberikan keseimbangan yang baik bagi aplikasi Anda. Anda dapat berfokus pada pengelolaan status dengan JavaScript, dan hanya menyetel class yang sesuai pada elemen target, sehingga browser dapat menangani animasi. Jika menggunakan cara ini, Anda dapat memproses peristiwa transitionend pada elemen, tetapi hanya jika Anda dapat melepaskan dukungan untuk versi Internet Explorer lama; versi 10 adalah versi pertama yang mendukung peristiwa ini. Semua browser lain telah mendukung peristiwa tersebut selama beberapa waktu.

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 banyak terhadap keyframe, durasi, dan iterasi animasi individu.

Catatan: Jika Anda baru dalam dunia animasi, keyframe adalah istilah lama dari animasi yang digambar tangan. Animator akan membuat bingkai khusus untuk suatu tindakan, yang disebut frame kunci, yang akan menangkap hal-hal seperti bagian paling ekstrem dari beberapa gerakan, lalu mereka akan menggambar semua frame individual yang berada di antara keyframe. Kita menjalankan proses yang sama saat ini dengan animasi CSS, kita menginstruksikan browser tentang nilai yang harus dimiliki properti CSS pada titik tertentu, dan keyframe mengisi celahnya.

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 sekaligus.

.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 secara independen dari elemen target, dan menggunakan properti animation-name untuk memilih animasi yang diperlukan.

Jika Anda ingin animasi CSS Anda berfungsi pada browser lama, Anda harus menambahkan awalan vendor. Banyak alat yang dapat membantu Anda membuat versi awalan dari CSS yang Anda butuhkan, sehingga Anda dapat menulis versi tanpa awalan dalam file sumber Anda.

Menganimasikan dengan JavaScript dan Web Animations API

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

Animasi JavaScript bersifat penting, karena Anda menulisnya inline sebagai bagian dari kode. Anda juga dapat mengenkapsulasinya di dalam objek lain. Berikut adalah JavaScript yang harus Anda tulis untuk membuat ulang transisi CSS yang sudah 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 default, Web Animasi hanya memodifikasi presentasi dari elemen. Jika ingin objek Anda tetap berada di lokasi pemindahannya, Anda harus mengubah gaya yang mendasarinya saat animasi selesai, seperti pada contoh kami.

Cobalah

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

Dengan animasi JavaScript, Anda memiliki kontrol penuh dari gaya elemen ini dalam setiap langkahnya. Artinya, Anda dapat memperlambat animasi, menjeda, menghentikan, membalikkannya, dan memanipulasi elemen animasi sesuai keinginan Anda. Hal ini sangat berguna jika Anda membuat aplikasi berorientasi objek yang kompleks, karena Anda dapat mengenkapsulasi perilaku dengan benar.