مولّد حركة CSS
أنشئ keyframes بمدة ومنحنى توقيت وتكرار تختاره، مع قاعدة مراعاة تفضيل تقليل الحركة.
طريقة الاستخدام
- اضبط القيم والخيارات أو جرّب المثال.
- أنشئ الكود وراجع المعاينة أو الحسابات.
- انسخ النتيجة أو نزّلها وجرّبها داخل تصميمك.
يتوقف مثال الحركة عند تفضيل تقليل الحركة. اختبر ملاءمة الحركة وإمكانية إيقافها في موقعك.
فعّل JavaScript لاستعمال الأداة ومعالجة البيانات محلياً داخل متصفحك.
مثال يساعدك تبدأ
بيانات توضيحية. تتغير النتيجة عندما تتغير المدخلات أو الإعدادات.
- المدخلات
انزلاق لأعلى من إزاحة 24px.
- الإعدادات
مدة 700ms ومنحنى ease-out وتكرار واحد.
- النتيجة المتوقعة
keyframes من translateY(24px) وشفافية صفر إلى موضعه الطبيعي، مع قاعدة تقليل الحركة.
متى تستعملها؟
- انزلاق لأعلى من إزاحة 24px. مدة 700ms ومنحنى ease-out وتكرار واحد.
- أنشئ keyframes بمدة ومنحنى توقيت وتكرار تختاره، مع قاعدة مراعاة تفضيل تقليل الحركة.
أسئلة عن الأداة
ماذا تعالج أداة مولّد حركة CSS؟
أنشئ keyframes بمدة ومنحنى توقيت وتكرار تختاره، مع قاعدة مراعاة تفضيل تقليل الحركة.
ما حدود النتيجة التي تنتجها؟
يتوقف مثال الحركة عند تفضيل تقليل الحركة. اختبر ملاءمة الحركة وإمكانية إيقافها في موقعك.