Latihan 1: CSS Animations — CSS

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

Bikin kotak oranye bergeser dari kiri ke kanan terus-menerus.

Di dalam <style>, bikin @keyframes geser yang mulai dari transform: translateX(0) dan berakhir di transform: translateX(200px).
Pasang ke .kotak dengan:
- animation-name: geser
- animation-duration: 2s
- animation-iteration-count: infinite

Boleh juga disingkat jadi satu baris: animation: geser 2s infinite.

Blok @keyframes geser ikut dicek di kodenya: tanpa itu, kotaknya gak bergerak walau animation-name sudah terpasang.

Hint

Animasi butuh dua bagian: tahap-tahap gerakannya di @keyframes, lalu properti animation di elemen yang mau digerakkan.
Di @keyframes geser, pakai from dan to dengan transform: translateX(). Di .kotak, sebut nama geser, durasi 2s, dan infinite.
@keyframes geser { from { transform: translateX(0); } to { transform: translateX(200px); } } lalu di .kotak tambahkan animation: geser 2s infinite;

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: CSS Animations — CSS

Hint

Memperbarui Aplikasi