Tercih edilen hareket azaltma

@media (prefers-reduced-motion) ile animasyon azaltmayı öğrenirsin.

prefers-reduced-motion

Bazı kullanıcılar hareketlere karşı duyarlıdır; animasyonlar baş dönmesi yapabilir. Sistemlerinde "hareketi azalt" tercihini açarlar. CSS'te @media (prefers-reduced-motion: reduce) sorgusuyla bu tercihi yakalarsın.

Bu bloğun içinde animasyon sürelerini kısaltır veya tamamen kaldırırsın. En sağlam yazım animation: none ve transition: none vermektir; böylece hareket tamamen durur, içerik hâlâ çalışır.

Hareketi yumuşatmak

Animasyonları tamamen kaldırmak her zaman istediğin bir şey değildir; bazen yalnızca hareketi yumuşatmak yeterlidir. O zaman transition-duration: 0.01ms gibi çok kısa bir süre verirsin; hareket teknik olarak var olur ama gözle görülmez.

Bu yaklaşım, kullanıcıya "hareketi azalt" tercihini saygıyla karşılar ama yine de bir geçiş olduğu izlenimini korur. İçerik anında görüntülenir; tahmin edilebilirlik artar.

Uygulama Hareketi yumuşatan blok yaz

Bir @media (prefers-reduced-motion: reduce) bloğu yaz. İçinde evrensel seçici * için animation-duration: 0.01ms ve transition-duration: 0.01ms bildirimlerini tanımla.

Örnek çözümü göster

/* hareketi azalt */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

Kendini test et

prefers-reduced-motion: reduce bloğunda en sağlam yazım hangisidir?
- Animasyon süresini yarıya indirmek
- animation: none ve transition: none ile hareketi durdurmak
- Animasyonu yavaşlatmak ama devam ettirmek
- Yalnızca arka plan rengini değiştirmek
Cevabı göster

animation: none ve transition: none ile hareketi durdurmak — Doğru. animation: none ve transition: none hareketi tamamen durdurur; içerik hâlâ çalışır.

Hareket azaltma sorgusunu yaz

@media (____: reduce) {
  * { animation: none; transition: none; }
}

Cevabı göster

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

Hareket azaltma bildirimlerini eşle

animation: none

Tüm animasyonu durdur
transition: none

Tüm geçişi durdur
animation-duration: 0.01ms

Çok kısa süre ver
scroll-behavior: auto

Anında kaydır

Sıradaki ders: Tercih edilen kontrast

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler