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