Cara membuat animasi CSS berperforma tinggi

Kayce Basques

Rachel Andrew

Panduan ini mengajarkan 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

Dukungan Browser

• 36
• 12
• 16
• 9

Sumber

opacity

Dukungan Browser

• 1
• 12
• 1
• 2

Sumber

will-change

Dukungan Browser

• 36
• 79
• 36
• 9.1

Sumber

Memindahkan elemen

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

Misalnya, untuk menggeser item ke tampilan, 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.

Menghindari properti yang memicu tata letak atau gambar

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

Peringatan: Jika harus menggunakan properti yang memicu tata letak atau gambar, Anda mungkin tidak akan dapat membuat animasi tetap lancar atau berperforma tinggi.

Memaksa pembuatan lapisan

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

Browser biasanya dapat membuat keputusan yang baik 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 gunakan di awal proses pengoptimalan Anda. Sebagai gantinya, gunakan metode ini hanya jika Anda melihat masalah grafis dan merasa promosi elemen ke lapisan baru dapat membantu.

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

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

Namun, spesifikasi menyarankan agar Anda hanya melakukannya untuk elemen yang selalu akan berubah. Misalnya, ini mungkin berlaku untuk sidebar yang dapat digeser pengguna ke dalam dan keluar. Untuk elemen yang tidak sering berubah, sebaiknya terapkan will-change menggunakan JavaScript saat perubahan cenderung terjadi. Pastikan untuk memberi browser cukup waktu untuk melakukan pengoptimalan yang diperlukan, dan hapus properti saat perubahan telah berhenti.

Catatan: Untuk informasi selengkapnya dan contoh penggunaan will-change, lihat Semua yang Perlu Anda Ketahui tentang Properti will-change CSS.

Jika Anda memaksa pembuatan lapisan di browser yang tidak mendukung will-change (kemungkinan besar Internet Explorer), Anda dapat menetapkan transform: translateZ(0).

Men-debug animasi yang lambat atau bermasalah

Chrome DevTools dan Firefox DevTools memiliki banyak alat untuk membantu Anda mengetahui penyebab animasi lambat atau terganggu.

Memeriksa apakah animasi memicu tata letak

Animasi yang memindahkan elemen menggunakan sesuatu selain transform kemungkinan akan 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 Glitch berikut, dan menjelajahi performa menggunakan DevTools.

• Sebelum.
• Setelah.

Chrome DevTools

1. Buka panel Performa.
2. Rekam performa runtime saat animasi Anda berlangsung.
3. Periksa tab Summary.

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

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

Contoh animation-with-transform tidak menyebabkan rendering bekerja.

Firefox DevTools

Di Firefox DevTools, Waterfall dapat membantu Anda memahami tempat browser menghabiskan waktu.

1. Buka panel Performa.
2. Mulai rekam performa saat animasi Anda sedang berlangsung.
3. Hentikan perekaman dan periksa tab Waterfall.

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

Periksa apakah ada frame yang menurun

1. Buka tab Rendering di Chrome DevTools.
2. Aktifkan kotak centang FPS meter.
3. Perhatikan nilai saat animasi berjalan.

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

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

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

Memeriksa apakah animasi memicu paint

Beberapa properti lebih mahal untuk ditampilkan oleh browser dibandingkan yang lain. Misalnya, apa pun yang melibatkan blur (seperti bayangan, misalnya) akan memakan waktu lebih lama untuk digambar daripada menggambar kotak merah. Perbedaan ini tidak selalu terlihat di CSS, tetapi DevTools browser dapat membantu Anda mengidentifikasi area mana yang perlu dicat ulang, serta masalah performa terkait proses menggambar 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 dicat ulang.

Jika seluruh layar berkedip, atau area yang ditandai yang menurut Anda tidak harus berubah, selidiki lebih lanjut.

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

Firefox DevTools

1. Buka Setelan dan tambahkan tombol Toolbox untuk Beralih berkedip cat.
2. Di halaman yang ingin Anda periksa, aktifkan tombolnya dan gerakkan mouse atau scroll untuk melihat area yang ditandai.

Kesimpulan

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

Gunakan paint profiler untuk mengetahui apakah ada operasi paint 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 seperlunya, dan hanya jika Anda mengalami masalah performa.