Cara membuat animasi CSS berperforma tinggi

Kayce Basques

Rachel Andrew

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.

• Sebelum.
• Setelah.

Chrome DevTools

1. Buka panel Performa.
2. Merekam performa runtime saat animasi berjalan.
3. 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.

1. Buka panel Performa.
2. Mulai perekaman performa saat animasi sedang berlangsung.
3. 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

1. Buka tab Rendering di Chrome DevTools.
2. Aktifkan kotak centang FPS meter.
3. 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

1. Buka tab Rendering di Chrome DevTools.
2. Pilih Paint Flashing.
3. 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

1. Buka Setelan dan tambahkan tombol Toolbox untuk Aktifkan/nonaktifkan flashing.
2. 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.