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

• Menggunakan animasi CSS untuk "one-shot" yang lebih sederhana transisi, seperti mengganti 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.

Sebagian besar animasi dasar dapat dibuat dengan CSS atau JavaScript, tetapi jumlah upaya dan waktu dapat berbeda (lihat juga Performa 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 animasi itu sendiri akan berada di CSS.
• Gunakan JavaScript saat Anda membutuhkan kontrol yang signifikan atas animasi Anda. Web Animations API adalah pendekatan berbasis standar, yang tersedia saat ini di sebagian besar browser modern. Ini menyediakan objek nyata, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna saat Anda perlu menghentikan, menjeda, memperlambat, atau membalikkan animasi Anda.
• Gunakan requestAnimationFrame secara langsung saat Anda ingin mengorkestrasi seluruh suasana dengan tangan. Ini adalah pendekatan JavaScript lanjutan, namun dapat bermanfaat jika Anda membangun permainan atau menggambar pada kanvas HTML.

Atau, jika Anda sudah menggunakan framework JavaScript yang menyertakan fungsi animasi, seperti melalui metode .animate() jQuery atau TweenMax dari GreenSock, secara keseluruhan mungkin akan lebih nyaman 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 hal 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 diatur untuk mengambil 500ms. Saat class move ditambahkan, nilai transform akan 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, yang pada dasarnya adalah 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 untuk aplikasi Anda. Anda dapat berfokus pada pengelolaan status dengan JavaScript, dan cukup 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 mengabaikan dukungan pada Internet Explorer versi 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 lebih banyak kontrol atas keyframe, durasi, dan iterasi animasi individual.

Catatan: Jika Anda baru mengenal animasi, keyframe adalah istilah lama dari animasi yang digambar tangan. Animator akan membuat frame tertentu untuk suatu tindakan, yang disebut frame kunci, yang akan merekam hal-hal seperti bagian paling ekstrem dari beberapa gerakan, lalu mereka akan menggambar semua frame individual yang berada di antara keyframe. Kita memiliki proses serupa saat ini dengan animasi CSS, di mana kita menginstruksikan browser nilai apa yang perlu dimiliki properti CSS pada titik tertentu, dan itu mengisi kekurangannya.

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 itu sendiri secara terpisah 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 CSS berawalan yang diperlukan, sehingga Anda dapat menulis versi tanpa awalan di 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 memberi developer kemampuan yang jauh lebih besar. 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. Di bawah ini 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 default, Animasi Web hanya memodifikasi presentasi 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. 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 langkah. Artinya, Anda dapat memperlambat animasi, menjeda, menghentikan, membalikkannya, dan memanipulasi elemen animasi sesuai keinginan Anda. Ini sangat berguna jika membangun aplikasi berorientasi objek yang kompleks, karena Anda bisa membungkus perilaku dengan benar.