Azaltılmış hareketli CSS
Azaltılmış hareket istendiğinde dekoratif CSS animasyonunu durdurun.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Proje
Her iki tercihi ve klavye odağını kontrol edin, hareket kapalıyken durum metnini koruyun.
Uygulamadan önce inceleyin
Gerçek davranışı beklenen sonuçla karşılaştırın. Bir kontrol başarısız olursa yeni değişikliklerden önce nedenini araştırın.
Modeller
Temel URL ve gerekiyorsa API anahtarıyla OpenAI uyumlu veya Anthropic endpoint yapılandırın. Bağlantıyı test edin. Yerel model sunucusu çalışıyor olmalıdır; uzak araçlar ayrıca veri aktarabilir.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Hareket tercihlerini arayüz değişikliğinin parçası sayın
MotionHearth, bağlı yapay zekâ modeliyle arayüz değişiklikleri geliştirmek için Windows kodlama alanıdır. Proje klasörünü getirin ve etkileşimin ne iletmesi gerektiğini açıklayın. Görüşme bileşeni ve stillerini birlikte izleyerek önerilen animasyonu iletmesi gereken durum, odak veya geri bildirim bağlamında incelemenize yardımcı olabilir.
motion.css dosyasının önerdiği bir görev, azaltılmış hareket istendiğinde animasyonu incelemektir. Hareket durduktan sonra mevcut arayüzün aynı bilgiyi nasıl ilettiğini ve klavye odağının belirgin kalıp kalmadığını sorun. Bu sorular örneği inceleyebileceğiniz bir uygulama değişikliğine dönüştürür. Ayrıca isteği yalnızca bir anahtar kareyi silmekten daha geniş tutarken gerçek ekranda kontrol edilebilecek kadar küçük bırakır.
Desteklenen OpenAI uyumlu veya Anthropic uç noktanız sunuyorsa kısıtlamasız yapay zekâ modeli seçebilirsiniz. Yetenek ve kısıtlamaların modele ve sunucuya ait olduğunu kabul ederek bağlantı ayrıntılarını ve gerekli kimlik bilgilerini ekleyin. Arayüzü hareket açıkken ve azaltılmışken sınamadan önce oluşan CSS ve bileşen düzenlemelerini inceleyin. İşaretçi girdisinin yanında klavye gezinmesini de kullanın. Amaç, yalnızca asistanın açıklamasına değil uygulamanızın görüntülediğine dayanan, iki tercihte de tutarlı bir davranıştır.
Hareketi ve etkileşimi birlikte kontrol etme
Azaltılmış hareket isteği ne belirtmeli?
Hareketli öğeyi, ilettiği bilgiyi ve beklediğiniz alternatif davranışı belirtin. İlgili bileşeni ve stil sayfasını ekleyin. Böylece önerilen değişiklik, kullanıcıların ne kaybettiğini düşünmeden hareketi kaldırmak yerine yararlı geri bildirimi koruyabilir.
Durdurulan animasyon mevcut durumu gizleyebilir mi?
Tek gösterge hareketse gizleyebilir. Animasyon kapatıldığında kalan metni, şekli veya durum işaretini inceleyin. Arayüzünüze uygun bir alternatif isteyin, ardından etkileşim boyunca açık kaldığını doğrulayın.
Hareket değişikliği sırasında klavye odağı neden sınanmalı?
Animasyonlu denetimin yakınındaki stiller odak göstergesini de etkileyebilir. Değişen ekranda klavyeyle gezinin ve hangi öğenin etkin olduğunu doğrulayın. Yalnızca anahtar kareleri incelemek, etkileşimin tamamının anlaşılır kaldığını kanıtlamaz.
Model kaynak dosyalarından ne kadarını doğrulayabilir?
Bağlamı ve araçları dahilinde mevcut kodun yorumunu önerebilir. Görüntülenen durumları yine sizin incelemeniz ve proje kontrollerini çalıştırmanız gerekir. Eksik ekranları, stilleri veya çalışma zamanı koşullarını incelemenin sınırları olarak ele alın.
MotionHearth · Güncellendi 2026-10-25