مولِّد حركة CSS
اضبط الإعدادات المسبقة للحركة أو الإطارات المفتاحية وشغِّل الحركة للتحقق منها. واحصل على CSS للاستخدام في صفحة ويب ومثال استخدام HTML.
ما يمكنك فعله
اضبط الحركة انطلاقًا من إعداد مسبق
اختر من 12 نوعًا، منها الدخول والخروج والدوران. غيّر المدة والتكرار بما يناسب استخدامك.
عدّل الحالات الوسيطة أيضًا
حدّد الإزاحة والدوران والمقياس والشفافية لكل إطار مفتاحي وتحقق من الحركة المولّدة.
الحصول على CSS و HTML
انسخ أو احفظ CSS الحركة ومثال استخدام HTML بالصنف نفسه.
طريقة الاستخدام
اختر إعدادًا مسبقًا
اختر الحركة التي تريدها وحدد مدة تشغيل واحد. واختيار إعداد مسبق مختلف يستبدل أيضًا أي إعدادات عدّلتها.
اضبط الأجزاء التي تحتاجها فقط
افتح تفاصيل التشغيل أو الإطارات المفتاحية لتغيير الحركة الوسيطة والاتجاه والتكرار والإعدادات الأخرى.
التوليد والتشغيل
تحقق منها عبر «توليد CSS والمعاينة». وإذا غيّرت أي إعدادات، أعد التوليد.
الحصول على CSS و HTML
طبّق CSS وأضف صنف toollet-motion إلى عنصر HTML. استخدم مثال استخدام HTML مع CSS.
مفيد عندما
إنشاء حركة دخول
استخدم إعدادًا مسبقًا للظهور التدريجي أو للدخول من الأسفل لضبط حركة الدخول وسرعتها.
حركة عند التفاعل مع زر
غيّر شرط البدء إلى التمرير أو تركيز لوحة المفاتيح لإنشاء حركة تستجيب للتفاعل.
فهم الإطارات المفتاحية وشروط التشغيل
الحالات الوسيطة والمدة
النسبة المئوية للإطار المفتاحي هي موضعه ضمن تشغيل واحد. وفي حركة مدتها ثانية واحدة، تقع 50% عند 0.5 ثانية. ويحدد منحنى التسارع كيفية تغيّر القيم بين الإطارات المفتاحية.
الحركة والدوران والمظهر
الموضع الأفقي/الرأسي هو مقدار الإزاحة عن الموضع الأصلي. المقياس 1 هو الحجم الأصلي؛ والشفافية 0 شفافة و1 معتمة.
التأخير والتكرار والاتجاه
يُضاف التأخير مرة واحدة فقط قبل بدء التشغيل. وفي التشغيل المحدود، يكون الزمن الكلي هو التأخير + مدة تشغيل واحد × عدد التكرارات. ويبدّل المتناوب بين الاتجاهين الأمامي والعكسي.
الحالات قبل التشغيل وبعده
اختر الحالة التي تظهر أثناء التأخير وبعد انتهاء التشغيل. وتغيّر إعدادات العكس والتناوب مواضع الإطارات المفتاحية المستخدمة عند بداية التشغيل ونهايته.
إعدادات تقليل الحركة
يدعم CSS المولّد إعداد تقليل الحركة في جهازك. فيوقف الحركة ويستخدم حالة النهاية التي يحددها الاتجاه وعدد التكرارات المضبوطان. وفي التشغيل اللانهائي، يستخدم نهاية التشغيل الأول.
الأسئلة الشائعة
هل يمكنني تشغيله مرة واحدة فقط؟
أوقف «الاستمرار في التكرار» واضبط عدد التكرارات على 1. تبدأ الإعدادات المسبقة القياسية بتشغيل واحد، بينما يبدأ الدوران والتعويم مع التكرار المستمر مفعّلًا.
أي عنصر ينبغي أن أطبق عليه CSS؟
أضف صنف toollet-motion إلى عنصر HTML واستخدمه مع CSS المولّد. مثال استخدام HTML هو جزء من عنصر button وليس صفحة ويب مستقلة كاملة.
كم عدد الإطارات المفتاحية التي يمكنني إنشاؤها؟
يمكنك استخدام 2–8 إطارات مفتاحية، بما في ذلك البداية عند 0% والنهاية عند 100%. عند إضافة إطار مفتاحي يوضع في منتصف أطول فترة. لا يمكن حذف البداية والنهاية، ومواضعهما بالنسبة المئوية ثابتة فقط.
اختفت المعاينة بعد أن غيّرت أحد الإعدادات.
تمسح النتائج عند تغيير الإعدادات حتى لا تستخدم الحركة أو الشيفرة من إعدادات سابقة عن غير قصد. أعد التوليد للتحقق من الإعدادات الحالية.
لماذا لا تتحرك المعاينة؟
تتوقف الحركة عند تفعيل تقليل الحركة على جهازك. وبالنسبة لإعدادات التمرير والتركيز، تحقق أيضًا من شروط البدء. وتتوقف المعاينة مؤقتًا عند مغادرة علامة التبويب هذه.
هل يمكنني استخدام عدة حركات في الصفحة نفسها؟
الصنف المولّد وأسماء الإطارات المفتاحية مشتركة. لاستخدام حركات منفصلة، غيّر الاسمين لكل حركة وطبّق هذه التغييرات على HTML المقابل.
المدخلات والنتائج
- الإعدادات
- 12 إعدادًا مسبقًا، و2–8 إطارات مفتاحية، ومدة من 0.2–60 ثانية.
- التشغيل
- تأخير من 0–60 ثانية، و1–100 تكرار أو تكرار لانهائي، ومنحنى التسارع، والاتجاه، والحالات قبل التشغيل وبعده، وشروط البدء.
- المخرجات
- CSS ومثال استخدام HTML. تُعرَّف الحركة فقط؛ ولا تُنشأ صفحة ويب كاملة ولا ملف فيديو.