Cara membuat animasi CSS berperforma tinggi

Kayce Basques

Rachel Andrew

Panduan ini menjelaskan cara membuat animasi CSS berperforma tinggi.

Lihat Mengapa beberapa animasi lambat? untuk mempelajari teori di balik rekomendasi ini.

Kompatibilitas browser

Semua properti CSS yang direkomendasikan panduan ini memiliki dukungan lintas browser yang baik.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Memindahkan elemen

Untuk memindahkan elemen, gunakan nilai kata kunci translate atau rotation dari properti transform.

Misalnya, untuk menggeser item agar terlihat, gunakan translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Gunakan rotate untuk memutar elemen. Contoh berikut memutar elemen 360 derajat.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Mengubah ukuran elemen

Untuk mengubah ukuran elemen, gunakan nilai kata kunci scale dari properti transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Mengubah visibilitas elemen

Untuk menampilkan atau menyembunyikan elemen, gunakan opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Catatan: Temukan contoh salin dan tempel berbagai animasi di Animista.

Hindari properti yang memicu tata letak atau menggambar

Sebelum menggunakan properti CSS apa pun untuk animasi (selain transform dan opacity), tentukan dampak properti pada pipeline rendering. Hindari properti apa pun yang memicu tata letak atau gambar, kecuali jika benar-benar diperlukan.

Peringatan: Jika Anda harus menggunakan properti yang memicu tata letak atau menggambar, Anda mungkin tidak dapat menjaga kelancaran atau performa tinggi animasi.

Memaksa pembuatan lapisan

Seperti yang dijelaskan dalam Mengapa beberapa animasi lambat?, menempatkan elemen pada lapisan baru memungkinkan browser mengecat ulang elemen tersebut tanpa perlu mengecat ulang tata letak lainnya.

Browser biasanya dapat membuat keputusan yang tepat tentang item mana yang harus ditempatkan di lapisan baru, tetapi Anda dapat memaksa pembuatan lapisan secara manual dengan properti will-change. Seperti namanya, properti ini memberi tahu browser bahwa elemen ini akan diubah dengan cara tertentu.

Perhatian: Karena pembuatan lapisan dapat menyebabkan masalah performa lainnya, sebaiknya jangan menggunakannya di awal proses pengoptimalan Anda. Sebagai gantinya, gunakan hanya jika Anda melihat masalah grafis dan berpikir bahwa mempromosikan elemen ke lapisan baru dapat membantu.

Di CSS, Anda dapat menerapkan will-change ke pemilih mana pun:

body > .sidebar {
  will-change: transform;
}

Namun, spesifikasi menyarankan agar Anda hanya menambahkan ini ke elemen yang akan selalu berubah. Misalnya, ini dapat digunakan untuk sidebar yang dapat ditarik masuk dan keluar oleh pengguna. Jika elemen tidak sering berubah, terapkan will-change menggunakan JavaScript saat perubahan kemungkinan akan terjadi. Pastikan untuk memberi browser waktu yang cukup untuk melakukan pengoptimalan yang diperlukan, dan hapus properti saat perubahan telah berhenti.

Untuk memaksakan pembuatan lapisan di browser tanpa dukungan untuk will-change, Anda dapat menetapkan transform: translateZ(0).

Men-debug animasi yang lambat atau bermasalah

Chrome DevTools dan Firefox DevTools dapat membantu Anda mengetahui penyebab animasi Anda lambat atau bermasalah.

Memeriksa apakah animasi memicu tata letak

Animasi yang memindahkan elemen menggunakan sesuatu selain transform cenderung lambat. Contoh berikut membandingkan animasi yang menggunakan transform dengan animasi yang menggunakan top dan left.

Larangan

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

Anjuran

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

Anda dapat mengujinya dalam dua contoh berikut dan mempelajari performa menggunakan DevTools.

• Sebelum, dengan animasi top dan left.
• Setelah itu, dengan transform.

Chrome DevTools

1. Buka panel Performa.
2. Rekam performa runtime saat animasi Anda terjadi.
3. Periksa tab Ringkasan.

Jika Anda melihat nilai bukan nol untuk Rendering di tab Ringkasan, hal ini mungkin berarti animasi Anda membuat browser melakukan pekerjaan tata letak.

Contoh animation-with-top-left menyebabkan pekerjaan rendering.

Contoh animation-with-transform tidak menyebabkan pekerjaan rendering.

Firefox DevTools

Di Firefox DevTools, Waterfall dapat membantu Anda memahami waktu yang digunakan browser.

1. Buka panel Performa.
2. Mulai merekam performa saat animasi Anda terjadi.
3. Hentikan perekaman dan periksa tab Waterfall.

Jika Anda melihat entri untuk Recalculate Style, artinya browser harus kembali ke awal waterfall rendering untuk merender animasi.

Memeriksa frame yang terputus

1. Buka tab Rendering di Chrome DevTools.
2. Aktifkan kotak centang Pengukur FPS.
3. Amati nilai saat animasi Anda berjalan.

Perhatikan label Frame di bagian atas UI pengukur FPS. Ini menampilkan nilai seperti 50% 1 (938 m) dropped of 1878. Animasi berperforma tinggi memiliki persentase yang tinggi, seperti 99%, yang berarti hanya sedikit frame yang dihilangkan dan animasi terlihat lancar.

Contoh animation-with-top-left menyebabkan 50% frame dihilangkan

Contoh animation-with-transform hanya menyebabkan 1% frame dihilangkan.

Memeriksa apakah animasi memicu pengecatan

Beberapa properti lebih mahal untuk dirender oleh browser dibandingkan yang lain. Misalnya, apa pun yang melibatkan blur (seperti bayangan, misalnya) memerlukan waktu lebih lama untuk digambar daripada menggambar kotak merah. Perbedaan ini tidak selalu terlihat jelas di CSS, tetapi DevTools browser dapat membantu Anda mengidentifikasi area mana yang perlu digambar ulang, serta masalah performa terkait penggambaran lainnya.

Chrome DevTools

1. Buka tab Rendering di Chrome DevTools.
2. Pilih Paint Flashing.
3. Pindahkan pointer di sekitar layar.

Dalam contoh dari Google Maps ini, Anda dapat melihat elemen yang diwarnai ulang.

Jika Anda melihat seluruh layar berkedip, atau area yang disorot yang menurut Anda tidak seharusnya berubah, selidiki lebih lanjut.

Jika Anda perlu menentukan apakah properti tertentu menyebabkan masalah performa terkait penggambaran, profiler penggambaran di Chrome DevTools dapat membantu.

Firefox DevTools

1. Buka Setelan dan tambahkan tombol Toolbox untuk Aktifkan/nonaktifkan kilatan cat.
2. Di halaman yang ingin Anda periksa, aktifkan tombol dan gerakkan mouse atau scroll untuk melihat area yang disorot.

Membuat animasi pada tahap komposit

Jika memungkinkan, batasi animasi ke opacity dan transform agar animasi tetap berada di tahap komposit jalur rendering. Gunakan DevTools untuk memeriksa tahap jalur mana yang terpengaruh oleh animasi Anda.

Gunakan profiler gambar untuk melihat apakah ada operasi gambar yang sangat mahal. Jika Anda menemukan sesuatu, periksa apakah properti CSS yang berbeda memberikan tampilan dan nuansa yang sama dengan performa yang lebih baik.

Gunakan properti will-change dengan hemat, dan hanya jika Anda mengalami masalah performa.