Materi
Toko Nusantara memasang panel harga di halaman produk. Tiga hal digabung di misi ini: warna yang datang dari satu tempat lewat custom property, baris aksi yang menempel di tepi atas dengan position: sticky, dan tombol yang perubahan warnanya dihaluskan dengan transition.
Properti transition menghaluskan perubahan nilai. Saat sebuah properti berpindah dari nilai lama ke nilai baru — karena kelas semu seperti :hover, atau karena kelas yang ditambahkan — peramban menggambar nilai-nilai di antaranya selama durasi yang kamu tulis, bukan meloncat seketika.
.tombol {
background-color: var(--warna-utama);
transition: background-color 200ms ease;
}
.tombol:hover {
background-color: var(--warna-gelap);
}Penulisan singkat transition berisi empat bagian berurutan: nama properti, durasi, fungsi waktu, lalu tunda. Nilai transition: transform 300ms ease-out 150ms berarti perubahan transform ditunda 150 milidetik, lalu berjalan 300 milidetik. Durasi wajib ada; tanpa durasi tidak ada yang digambar bertahap. Dua nilai waktu dibedakan dari urutannya — yang pertama durasi, yang kedua tunda.
Yang bisa ditransisikan adalah properti yang punya nilai antara: warna, panjang, dan transform. Perpindahan yang tidak punya nilai antara, seperti berganti jenis huruf, berpindah langsung. Menulis transition di aturan dasar — bukan di dalam :hover — membuat perubahannya halus di dua arah, saat penunjuk masuk dan saat penunjuk keluar.
