CSS بحركة مخفضة
أوقف حركة CSS الزخرفية عند طلب تقليل الحركة.
@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; }
}المشروع
اختبر حالتي التفضيل وتركيز لوحة المفاتيح مع الحفاظ على نص الحالة عندما تتوقف الحركة.
راجع قبل التطبيق
قارن السلوك الفعلي بالنتيجة المتوقعة. إذا فشل فحص، تحقّق من السبب قبل إجراء تغييرات إضافية.
النماذج
اضبط نقطة اتصال متوافقة مع OpenAI أو Anthropic باستخدام العنوان الأساسي ومفتاح API عند الحاجة. اختبر الاتصال. يجب أن يعمل خادم النموذج المحلي؛ وقد ترسل الأدوات البعيدة البيانات بشكل منفصل.
@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; }
}تعامل مع تفضيلات الحركة كجزء من تغيير الواجهة
MotionHearth مساحة برمجة على Windows لتطوير تغييرات الواجهة مع نموذج ذكاء اصطناعي متصل. أحضر مجلد المشروع وصف ما ينبغي أن يوصله التفاعل. يمكن للمحادثة تتبع المكون وأنماطه معاً، مما يساعدك على مراجعة حركة مقترحة في سياق الحالة أو التركيز أو التغذية الراجعة التي يفترض أن تنقلها.
من المهام التي يقترحها motion.css مراجعة حركة عند طلب تقليل الحركة. اسأل كيف توصل الواجهة الحالية المعلومات نفسها بعد توقف الحركة، وهل يبقى تركيز لوحة المفاتيح واضحاً. تحول هذه الأسئلة المثال إلى تغيير في التطبيق يمكنك فحصه. كما تجعل الطلب أوسع من مجرد حذف إطار رئيسي، مع إبقائه صغيراً بما يكفي لفحصه على الشاشة الفعلية.
يمكنك اختيار نموذج ذكاء اصطناعي بلا قيود إذا وفرته نقطة النهاية المدعومة المتوافقة مع OpenAI أو الخاصة بـ Anthropic. أضف تفاصيل اتصاله وبيانات الاعتماد المطلوبة، مع إدراك أن الإمكانات والقيود تخص النموذج والخادم. راجع تعديلات CSS والمكون الناتجة قبل اختبار الواجهة مع تفعيل الحركة وتقليلها. استخدم التنقل بلوحة المفاتيح إلى جانب المؤشر. الهدف سلوك متسق في كلا التفضيلين، تدعمه نتائج العرض في تطبيقك لا وصف المساعد وحده.
فحص الحركة والتفاعل معاً
ما الذي ينبغي تحديده في طلب تقليل الحركة؟
سمّ العنصر المتحرك والمعلومات التي ينقلها والسلوك البديل المتوقع. أدرج المكون وورقة الأنماط المعنيين. يتيح ذلك للتغيير المقترح حفظ التغذية الراجعة المفيدة بدلاً من إزالة الحركة دون مراعاة ما يفقده المستخدمون.
هل يمكن أن يخفي إيقاف الحركة الحالة الحالية؟
نعم، إذا كانت الحركة المؤشر الوحيد. افحص النص أو الشكل أو علامة الحالة المتبقية عند تعطيل الحركة. اطلب بديلاً يناسب واجهتك، ثم تحقق من بقائه واضحاً طوال التفاعل.
لماذا أختبر تركيز لوحة المفاتيح أثناء تغيير الحركة؟
قد تؤثر الأنماط القريبة من عنصر تحكم متحرك في مؤشر تركيزه أيضاً. تنقل في الشاشة المعدلة بلوحة المفاتيح وتأكد من العنصر النشط. لا تثبت مراجعة الإطارات الرئيسية وحدها بقاء التفاعل الكامل مفهوماً.
إلى أي حد يستطيع النموذج التحقق من ملفات المصدر؟
يمكنه اقتراح تفسير للشفرة المتاحة ضمن سياقه وأدواته. ما زلت تحتاج إلى فحص الحالات المعروضة وتشغيل فحوص المشروع. اعتبر الشاشات أو الأنماط أو ظروف التشغيل المفقودة حدوداً للمراجعة.
MotionHearth · آخر تحديث 2026-10-25