Dalam postingan ini, cari tahu cara membuat beberapa animasi populer yang ada di CodePen. Semua animasi ini menggunakan teknik berperforma tinggi yang dibahas dalam artikel lain di bagian ini.
Lihat Mengapa beberapa animasi lambat? untuk mempelajari teori di balik rekomendasi ini, dan Panduan Animasi untuk mendapatkan tips praktis.
Animasi pemuatan wizard
Lihat animasi pemuatan Wizard di CodePen
Animasi pemuatan ini dibuat sepenuhnya dengan CSS. Gambar beserta semua animasinya dibuat di CSS dan HTML, tanpa gambar atau JavaScript. Untuk memahami cara pembuatannya dan seberapa baik performanya, Anda dapat menggunakan Chrome DevTools.
Memeriksa animasi dengan Chrome DevTools
Saat animasi berjalan, buka tab Performance di Chrome DevTools dan rekam animasi selama beberapa detik. Anda akan melihat di Ringkasan bahwa browser tidak melakukan operasi Tata Letak atau Penggambaran saat menjalankan animasi ini.