Latihan 1: Animasi Performant — Performance

Latihan 1 dari materi Animasi Performant di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya <style> berisi komentar dan <div class="box"></div>. Biarkan div-nya, lalu tulis CSS-nya di dalam <style>:

Beri .box ukuran dan warna supaya kelihatan: width: 100px; height: 100px; background: #2563eb;.
Tambahkan will-change: transform; di .box.
Buat @keyframes geser yang menggeser kotak lewat transform, bukan left: from { transform: translateX(0); } dan to { transform: translateX(200px); }. Tulis translateX persis begitu, X kapital.
Jalankan di .box: animation: geser 2s ease-in-out infinite alternate;. Urutan nilainya bebas, asal nama animasinya ada.

Yang dinilai: .box punya will-change: transform, ada @keyframes yang isinya transform: translateX(...), dan ada deklarasi animation: (atau animation-name:) yang menyebut nama animasinya, bukan cuma durasi dan kata kunci seperti ease-in-out atau none. @keyframes-nya sendiri yang memuat transform: translateX(...), di dalam bloknya. Ukuran, warna, durasi, dan nama geser gak dinilai, tapi tanpa ukuran dan warna kotaknya gak kelihatan.

Hint

Gerakan yang mulus cukup menggeser lapisan elemen, tanpa mengubah posisinya di layout. Gerakannya ditulis di @keyframes, lalu dipanggil dari .box, dan browser diberi tahu dari awal properti apa yang akan berubah.
Strukturnya: .box { width; height; background; will-change: transform; animation: nama durasi ...; } lalu @keyframes nama { from { transform: translateX(...); } to { transform: translateX(...); } }.
.box { width: 100px; height: 100px; background: #2563eb; will-change: transform; animation: geser 2s ease-in-out infinite alternate; } @keyframes geser { from { transform: translateX(0); } to { transform: translateX(200px); } }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Animasi Performant — Performance

Hint

Memperbarui Aplikasi