Cara bermain Transisi Lampu Merah
- Baca instruksi level. Arena menampilkan
jalan.cssyang tidak bisa diubah, dua jalur (jalurmu dan jalur tujuan), dan grafik nilai terhadap waktu untuk tiap properti yang dinilai. - Pada t=0 sebuah kelas, mis.
.hijau, ditambahkan ke lampu dan mobil. Tulis CSS-mu di editor: CSS-mu dimuat setelahjalan.css. Grafik langsung berubah selagi kamu mengetik, dengan garis oranye untuk kurvamu dan garis putus-putus untuk target. - Tekan tombol putar untuk menjalankan pratinjau sekali dari 0 sampai akhir grafik, atau geser penggeser waktu untuk melihat posisi di detik tertentu. Pratinjau tidak berulang sendiri.
- Di level terakhir ada tombol Normal dan Gerak dikurangi untuk melihat hasil CSS-mu dengan
prefers-reduced-motion: reduce. - Tekan Cek jawaban atau Ctrl + Enter. Yang dicek nilai tiap properti setiap 20 ms, bukan teks CSS-mu, dan pesan gagal menyebut detik dengan selisih terbesar.
- Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.
Yang kamu pelajari
- Level 1
transition-duration
Tanpa durasi, perubahan nilai terjadi seketika.
transition-duration: 2smembuat browser menghitung nilai di antaranya selama 2 detik. - Level 2
Easing
transition-timing-functionmengatur kecepatan sepanjang durasi. Bawaannyaease;linearberarti kecepatan tetap. - Level 3
transition-delay
Delay menunda awal transisi tanpa memotong durasinya.
- Level 4
Shorthand transition
transition: transform 1.5s ease-in-out 0.5s. Waktu pertama selalu durasi, waktu kedua selalu delay. - Level 5
Properti yang bisa ditransisikan
Angka, warna, dan
transformbisa dihitung nilai tengahnya.displaytidak bisa, jadi pakaiopacityuntuk memudar. - Level 6
Beberapa properti
Daftar dengan koma memberi tiap properti durasi sendiri:
background-color 0.3s, opacity 1.5s. - Level 7
cubic-bezier()
Kurva easing buatan sendiri. Nilai y boleh di luar 0 sampai 1 untuk efek ancang-ancang atau kebablasan.
- Level 8
steps()
Membagi waktu jadi beberapa bagian dengan nilai yang diam di tiap bagian, seperti gerak patah-patah.
- Level 9
@keyframes
Keyframe dengan persen (
0%, 100%dan50%) plus jumlah putaran terbatas dianimation. - Level 10
animation-fill-mode
forwardsmempertahankan nilai keyframe terakhir setelah animasi selesai. - Level 11
animation-direction
alternatemenjalankan putaran genap terbalik, jadi animasi bolak-balik tanpa lompatan. - Level 12
prefers-reduced-motion
Media query untuk pengguna yang meminta gerakan dikurangi. Matikan atau ringankan animasi hanya untuk mereka.
Transition menunggu perubahan, animation berjalan sendiri
transition tidak melakukan apa-apa sampai nilai sebuah properti berubah, mis. saat kelas .hijau ditambahkan dan transform berpindah dari 0 ke 240px. Browser lalu mengisi nilai di antaranya selama durasi. Karena itu transisi selalu bergerak dari nilai lama ke nilai baru, dan aturan transition yang dipakai adalah yang berlaku sesudah perubahan.
animation membawa nilainya sendiri di @keyframes dan langsung berjalan begitu dipasang. Setelah selesai, elemen kembali ke nilai dari CSS biasa, kecuali kamu menulis forwards. Pakai transition untuk perubahan keadaan (hover, buka tutup menu), dan animation untuk gerak yang punya urutan sendiri (kedipan, putaran).
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Kenapa transition display tidak jalan?
display hanya punya keadaan diskrit seperti block dan none, tanpa nilai di antaranya, jadi browser langsung menggantinya. Untuk memudar, transisikan opacity (dan kalau perlu visibility). Browser baru punya transition-behavior: allow-discrete untuk menunda display: none, tapi game ini belum memodelkannya.
Properti apa yang sebaiknya dianimasikan?
transform dan opacity. Keduanya bisa dikerjakan browser tanpa menghitung ulang tata letak halaman, jadi gerakannya mulus. Menganimasikan width, top, atau margin memaksa tata letak dihitung ulang di tiap frame.
Apa beda ease, ease-in, ease-out, dan ease-in-out?
Semuanya kurva cubic-bezier() bawaan. ease-in pelan di awal, ease-out pelan di akhir, ease-in-out pelan di keduanya, dan ease (bawaan) mirip ease-in-out tapi lebih cepat di awal. Grafik di game ini memperlihatkan bedanya tanpa harus menonton gerakannya.
Apakah animation-iteration-count: infinite boleh dipakai?
Boleh di CSS, tapi pikirkan dulu tujuannya. Animasi yang berulang tanpa akhir mengganggu orang yang sedang membaca dan bisa membuat pusing. Pakai jumlah putaran terbatas kalau cukup, dan matikan atau ringankan untuk prefers-reduced-motion: reduce.
Bagaimana jawaban dicek?
Model kecil menghitung nilai transform, opacity, dan background-color lampu dan mobil setiap 20 ms dari CSS-mu, lalu membandingkannya dengan hasil jawaban acuan. Jadi tulisan yang berbeda, mis. shorthand atau longhand, sama-sama benar kalau kurvanya sama. Penilaian tidak bergantung pada kecepatan komputermu.
Selector dan properti apa saja yang dibaca?
Selector kelas seperti .mobil dan .mobil.hijau, daftar dengan koma, @keyframes, dan @media (prefers-reduced-motion: reduce | no-preference). Propertinya transition dan animation beserta longhand-nya, transform (hanya translateX(...px)), opacity, background atau background-color dengan warna bernama, dan display. Belum dimodelkan: animation-timing-function di dalam keyframe dan animasi yang sudah berjalan sebelum kelas ditambahkan.