Halaman ini diterjemahkan oleh Cloud Translation API.

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. Opsi yang Anda pilih benar-benar bergantung pada dependensi lain dari project Anda, dan jenis efek yang ingin Anda capai.

Ringkasan

Gunakan animasi CSS untuk transisi "one-shot" yang lebih sederhana, seperti mengalihkan status elemen UI.
Gunakan animasi JavaScript jika Anda ingin memiliki efek lanjutan seperti memantul, berhenti, menjeda, memundurkan, atau memperlambat.
Jika Anda memilih untuk menganimasikan dengan JavaScript, gunakan Web Animations API atau framework modern yang Anda sukai.

Sebagian besar animasi dasar dapat dibuat dengan CSS atau JavaScript, tetapi jumlah upaya dan waktu yang diperlukan berbeda (lihat juga Performa CSS vs. JavaScript). Masing-masing memiliki kelebihan dan kekurangan, tetapi berikut adalah panduan yang baik:

Gunakan CSS jika Anda memiliki status yang lebih kecil dan mandiri untuk elemen UI. Transisi dan animasi CSS sangat 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 Anda.
Gunakan JavaScript jika Anda memerlukan kontrol yang signifikan atas animasi. Web Animations API adalah pendekatan berbasis standar, yang saat ini tersedia di sebagian besar browser modern. Hal ini memberikan objek nyata, yang ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna saat Anda perlu menghentikan, menjeda, memperlambat, atau membalikkan animasi.
Gunakan requestAnimationFrame secara langsung jika Anda ingin mengatur seluruh tampilan secara manual. Ini adalah pendekatan JavaScript lanjutan, tetapi dapat berguna jika Anda membuat game atau menggambar ke 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 menggunakan framework tersebut untuk animasi Anda.

Menganimasikan dengan CSS

Menganimasikan dengan CSS adalah cara termudah untuk membuat sesuatu bergerak di layar. Pendekatan ini dijelaskan sebagai deklaratif, karena Anda menentukan hal yang ingin terjadi.

Di bawah ini adalah beberapa CSS yang memindahkan elemen 100px di sumbu X dan Y. Hal ini dilakukan dengan menggunakan transisi CSS yang disetel 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 opsi untuk easing, yang pada dasarnya adalah nuansa animasi. 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');

Tindakan ini memberikan keseimbangan yang baik untuk aplikasi Anda. Anda dapat berfokus pada pengelolaan status dengan JavaScript, dan cukup menetapkan class yang sesuai pada elemen target, sehingga browser akan menangani animasi. Jika menggunakan rute 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 lainnya telah mendukung peristiwa ini 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 dapat menggunakan animasi CSS, yang memungkinkan Anda memiliki kontrol yang jauh lebih besar atas setiap keyframe, durasi, dan iterasi animasi.

Misalnya, Anda dapat menganimasikan kotak dengan cara yang sama dengan transisi, tetapi menganimasikannya tanpa interaksi pengguna seperti mengklik, dan dengan pengulangan tanpa batas. 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 independen dari elemen target, dan menggunakan properti animation-name untuk memilih animasi yang diperlukan.

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

Membuat animasi dengan JavaScript dan Web Animations API

Secara perbandingan, membuat animasi dengan JavaScript lebih kompleks daripada menulis animasi atau transisi CSS, tetapi biasanya memberikan lebih banyak kemampuan kepada developer. Anda dapat menggunakan Web Animations API untuk menganimasikan properti CSS tertentu atau membuat objek efek composable.

Animasi JavaScript bersifat imperatif, karena Anda menulisnya secara inline sebagai bagian dari kode. Anda juga dapat mengenkapsulasinya di dalam objek lain. Berikut adalah JavaScript yang perlu 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 mengubah presentasi elemen. Jika ingin objek tetap berada di lokasi yang telah dipindahkan, Anda harus mengubah gaya dasarnya saat animasi selesai, seperti contoh kami.

Cobalah

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

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