Panduan ini menunjukkan 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 jaringan lintas browser yang baik dukungan teknis IT.
transform
opacity
will-change
Memindahkan elemen
Untuk memindahkan elemen, gunakan nilai kata kunci translate
atau rotation
elemen
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
elemen
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;
}
}
Menghindari properti yang memicu tata letak atau penggambaran
Sebelum menggunakan properti CSS untuk animasi (selain transform
dan opacity
),
menentukan dampak properti terhadap pipeline rendering.
Hindari properti yang memicu tata letak atau penggambaran kecuali jika benar-benar diperlukan.
Memaksa pembuatan lapisan
Seperti yang dijelaskan dalam Mengapa beberapa animasi lambat?, menempatkan elemen pada {i>layer<i} baru memungkinkan {i>browser<i} mengecat ulang mereka tanpa perlu mengecat ulang sisa tata letak.
{i>Browser<i} biasanya dapat membuat keputusan yang baik tentang item mana yang harus ditempatkan di
{i>layer<i} baru, tetapi Anda dapat memaksa
pembuatan lapisan secara manual dengan
Properti will-change
.
Seperti namanya, properti ini memberi tahu browser bahwa elemen ini akan digunakan
untuk diubah dengan beberapa cara.
Dalam CSS, Anda dapat menerapkan will-change
ke pemilih mana pun:
body > .sidebar {
will-change: transform;
}
Namun, spesifikasi
menyarankan bahwa Anda sebaiknya hanya
melakukan hal ini untuk elemen yang selalu
berubah. Misalnya, ini mungkin berlaku untuk {i>sidebar<i}
yang dapat digeser pengguna dan
posisi-posisi ini. Untuk elemen yang tidak sering berubah, sebaiknya terapkan
will-change
menggunakan JavaScript saat perubahan mungkin terjadi. Pastikan untuk
beri browser cukup waktu untuk melakukan pengoptimalan yang diperlukan, dan hapus
properti ketika perubahan telah berhenti.
Jika Anda memaksa pembuatan lapisan di browser yang tidak mendukung will-change
(kemungkinan besar Internet Explorer), Anda dapat menyetel transform: translateZ(0)
.
Men-debug animasi yang lambat atau terganggu
Chrome DevTools dan Firefox DevTools memiliki banyak alat untuk membantu Anda mengetahui penyebab animasi Anda lambat atau bermasalah.
Memeriksa apakah animasi memicu tata letak
Animasi yang memindahkan elemen menggunakan sesuatu selain transform
adalah
mungkin akan lambat. Contoh berikut membandingkan animasi yang menggunakan transform
ke animasi yang menggunakan top
dan left
.
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.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 mempelajari performa menggunakan DevTools.
Chrome DevTools
- Buka panel Performa.
- Merekam performa runtime saat animasi berjalan.
- Periksa tab Summary.
Jika Anda melihat nilai bukan nol untuk Rendering di tab Summary, mungkin berarti animasi Anda membuat browser melakukan tugas tata letak.
DevTools Firefox
Di Firefox DevTools, Waterfall dapat membantu Anda memahami di mana browser menghabiskan waktu.
- Buka panel Performa.
- Mulai perekaman performa saat animasi sedang berlangsung.
- Hentikan perekaman dan periksa tab Waterfall.
Jika melihat entri untuk Recalculate Style, artinya browser harus kembali ke awal Waterfall rendering untuk merender animasi.
Periksa apakah ada frame yang menurun
- Buka tab Rendering di Chrome DevTools.
- Aktifkan kotak centang FPS meter.
- Lihat nilainya saat animasi berjalan.
Perhatikan label Frame di bagian atas UI FPS meter.
Ini menunjukkan nilai seperti 50% 1 (938 m) dropped of 1878
. Performa tinggi
animasi memiliki persentase yang tinggi, seperti 99%
, yang berarti bahwa beberapa frame
terjatuh dan animasinya terlihat halus.
Memeriksa apakah animasi memicu paint
Beberapa properti lebih mahal untuk ditampilkan oleh browser dibandingkan yang lain. Sebagai apa pun yang melibatkan blur (seperti bayangan, misalnya) mengambil waktu lebih lama untuk dicat daripada menggambar kotak merah. Perbedaan ini tidak selalu terlihat jelas CSS, tetapi DevTools browser dapat membantu Anda mengidentifikasi area mana yang perlu dicat ulang, serta masalah kinerja terkait pengecatan lainnya.
Chrome DevTools
- Buka tab Rendering di Chrome DevTools.
- Pilih Paint Flashing.
- Gerakkan pointer di sekitar layar.
Jika Anda melihat seluruh layar berkedip, atau area yang disoroti menurut Anda harus berubah, selidiki lebih lanjut.
Jika Anda perlu menentukan apakah properti tertentu menyebabkan masalah performa terkait lukisan, profiler cat di Chrome DevTools dapat membantu.
DevTools Firefox
- Buka Setelan dan tambahkan tombol Toolbox untuk Aktifkan/nonaktifkan flashing.
- Pada halaman yang ingin Anda periksa, aktifkan tombol dan gerakkan {i>mouse<i} Anda atau scroll untuk melihat area yang disorot.
Kesimpulan
Jika memungkinkan, batasi animasi ke opacity
dan transform
agar tetap mempertahankan
pada tahap penggabungan dari jalur rendering. Gunakan DevTools untuk memeriksa
tahap jalur mana yang terpengaruh oleh animasi Anda.
Gunakan paint profiler untuk melihat apakah ada operasi cat mahal. Jika Anda menemukan sesuatu, periksa apakah properti CSS yang berbeda memberi tampilan dan nuansa yang sama dengan performa yang lebih baik.
Gunakan properti will-change
seperlunya, dan hanya jika Anda mengalami masalah performa.