prefers-reduced-motion

Animasi yang kita rangkai sepanjang section ini memberi umpan balik dan arah, tetapi bagi sebagian pengguna justru gerakan itulah sumber ketidaknyamanannya. Sistem operasi modern menyediakan pengaturan untuk mengurangi gerakan, dan CSS dapat membaca pengaturan tersebut lewat media query prefers-reduced-motion. Chapter penutup ini membahas kapan gerakan perlu dikurangi, pola global yang siap dipakai di semua proyek, cara menyaring gerakan secara terarah, dan prinsip agar animasi selalu berstatus pelengkap — bukan syarat.

Gerakan yang Berat bagi Sebagian Pengguna #

Sebagian orang mengalami gangguan vestibular — kondisi pada sistem keseimbangan yang membuat gerakan pada layar memicu pusing atau mual, mirip motion sickness ketika bepergian. Animasi yang besar, cepat, atau berulang tanpa henti adalah pemicu yang paling sering dilaporkan. Di luar itu, gerakan yang terus berdenyut juga menyulitkan konsentrasi bagi pengguna dengan gangguan perhatian.

Menghormati preferensi ini bukan berarti menghapus semua animasi, melainkan memberi pilihan. Karena itu sistem operasi menyediakan setelan pengurangan gerakan, dan browser meneruskannya ke CSS sebagai sinyal yang bisa kita baca — tugasmu menyesuaikan halaman terhadap sinyal itu.

Membaca Preferensi lewat Media Query #

@media (prefers-reduced-motion: reduce) {
  /* gaya khusus untuk pengguna yang memilih gerakan minimal */
}

Media query ini mengenal dua nilai: no-preference, keadaan default saat pengguna tidak mengatur apa pun, dan reduce, aktif ketika pengguna memilih mengurangi gerakan pada sistem operasinya. Nilai reduce bukan perintah untuk menghapus seluruh animasi — ia sinyal yang menyatakan: pengguna ini lebih nyaman dengan gerakan sesedikit mungkin.

Pola Global yang Siap Pakai #

Pola yang dipakai luas di produksi menekan durasi semua animasi dan transisi hingga nyaris nol:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Mari kita uraikan:

1. *, *::before, *::after — menyasar semua elemen beserta pseudo-elementnya, karena banyak animasi hidup di ::before dan ::after.
2. animation-duration: 0.01ms !important — animasi tetap berjalan tetapi selesai hampir seketika; elemen langsung berada di keadaan akhirnya tanpa gerakan.
3. animation-iteration-count: 1 !important — memaksa tiap animasi hanya satu putaran, sehingga semua loop termasuk infinite berhenti.
4. transition-duration: 0.01ms !important — perubahan state tetap terjadi, hanya tanpa gerakan panjang.
5. scroll-behavior: auto !important — menghentikan pengguliran halus yang ikut memicu ketidaknyamanan.

Tanda !important menjamin pola ini menang atas deklarasi animasi pada elemen apa pun, berapa pun specificity-nya. Kenapa menekan durasi alih-alih menghapus animasinya? Karena banyak animasi membawa perubahan yang penting: elemen yang masuk dengan opacity: 0 di titik awalnya tetap sampai ke keadaan terlihat, hanya tanpa perjalanan. Menghapus animasinya secara langsung bisa membuat elemen tertahan di keadaan yang tidak terlihat.

Menyaring Gerakan, Bukan Menghapus Semuanya #

Pola global itu palu besar: cepat dipasang, tetapi ikut menghapus fade halus yang sebenarnya tidak mengganggu siapa pun. Pendekatan yang lebih terarah menyaring per jenis efek — gerakan dihilangkan, perubahan yang tidak memindahkan apa pun dipertahankan:

@media (prefers-reduced-motion: reduce) {
  .kartu-produk:hover {
    transform: none; /* angkatan dihilangkan */
  }

  .dot-status {
    animation: none; /* denyut berulang dihentikan */
  }

  .panel-selamat-datang {
    animation: none;
    opacity: 1; /* keadaan akhir langsung ditampilkan */
    transform: none;
  }
}

Panduan menyaringnya:

Satu prinsip ikut menjaga pendekatan ini: informasi tidak boleh bergantung pada gerakan. Loader yang hanya berdenyut tanpa teks, status yang ditandai warna berkedip saja, atau konten yang hanya muncul lewat animasi masuk — semuanya menaruh informasi di dalam gerakan. Pastikan padanannya ada dalam bentuk statis: teks, ikon, atau keadaan akhir yang tetap terbaca.

Demo berikut membaca preferensi sistem operasi secara langsung — kartunya berdenyut lewat animation, dan media query yang sama ikut tertulis di CSS-nya:

Dengan setelan standar sistem operasi, kartu berdenyut pelan tanpa henti; bila sistem operasimu disetel mengurangi gerakan — misalnya opsi Reduce motion pada pengaturan aksesibilitas — kartu berhenti dan tampil diam di posisi normal. Karena preferensi dibaca saat halaman dimuat, perubahan setelan mungkin perlu memuat ulang halaman agar terlihat.

Prinsip: Gerakan adalah Pelengkap #

Kerangka pikir yang sehat adalah progressive enhancement: halaman harus lengkap dan berfungsi tanpa satu animasi pun, lalu animasi menambah kenyamanan di atas fondasi itu. Uji cepatnya sederhana — bayangkan semua gerakan dimatikan, lalu tanyakan apa yang hilang. Jawaban yang sehat adalah “sedikit kesan halus”; jawaban yang perlu dicermati adalah informasi atau fungsi. Dengan kerangka itu, prefers-reduced-motion bukan beban tambahan, melainkan pengingat untuk terus menempatkan animasi pada posisinya.

Kesalahan Umum #

Ringkasan #

prefers-reduced-motion membaca setelan pengurangan gerakan dari sistem operasi dan membukanya sebagai media query: pola global menekan semua durasi hingga nyaris nol agar perubahan tetap terjadi tanpa perjalanan, pendekatan terarah menyaring per jenis efek, dan prinsipnya satu — gerakan adalah pelengkap, bukan syarat. Section Transitions dan Animations kini tuntas, dari empat longhand transition, transform beserta origin-nya, keyframes dan delapan properti animation, hingga resep dan aksesibilitas gerakannya. Section berikutnya membawa kita ke custom properties dan organisasi CSS: cara menyimpan nilai yang dipakai berulang agar stylesheet mudah dirawat.