@keyframes dan prefers-reduced-motion
@keyframes mendefinisikan tahapan animasi, lalu dipanggil dengan properti animation. Bagian yang sering dilupakan: sebagian orang mengalami mual atau pusing karena gerakan (vestibular disorder), dan sistem mereka menyalakan 'reduce motion'. Menghormatinya lewat @media (prefers-reduced-motion: reduce) adalah standar profesional, bukan opsional.
👀 Contoh dulu
@keyframes geser {
from { transform: translateX(-20px); }
to { transform: translateX(0); }
}
.notif {
animation: geser 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
.notif { animation: none; }
}Hasilnya: Notifikasi meluncur masuk dari kiri. Bagi pengguna yang mematikan animasi di sistemnya, ia langsung muncul tanpa gerakan.
💡 Pola: definisikan @keyframes (nama bebas), panggil lewat properti animation, lalu hormati preferensi pengguna.
📝 Sekarang giliranmu
Buat @keyframes muncul (dari opacity: 0 ke opacity: 1), terapkan ke .pesan dengan animation: muncul 0.5s ease, lalu tambahkan @media (prefers-reduced-motion: reduce) yang mengatur animation: none pada .pesan.