ما هو مولّد حركات CSS؟

أنشئ حركات CSS بالإطارات المفتاحية بصرياً — بدون كتابة كود يدوياً. حدد الإطارات المفتاحية، واختر دوال التوقيت، واضبط المدة والتأخير، ثم انسخ كود CSS مباشرة إلى مشروعك. مناسب للأزرار ومؤشرات التحميل وتأثيرات التمرير وانتقالات الصفحات.

اختر من مكتبة تضم أكثر من أربعين حركة جاهزة موزّعة على مجموعات: التلاشي والانزلاق والتكبير والتدوير والارتداد ولفت الانتباه والخروج والمؤشرات، أو ابنِ حركتك من الصفر. كل إطار مفتاح يضبط الشفافية والتكبير والتدوير والإزاحة الأفقية والعمودية والإمالة على المحورين والضبابية واستدارة الحواف وظل الصندوق ولون الخلفية. لديك بالفعل كتلة @keyframes؟ ألصقها في نافذة الاستيراد وسيعيد المحرر المرئي بناء كل خطوة. أوقف المعاينة واسحب المؤشر الأحمر لتفحّص أي لقطة في منتصف الحركة، ثم صدّر كود @keyframes نقي جاهز للصق في أي ورقة أنماط.

كيفية الاستخدام

1. اختر قالبًا جاهزًا للرسوم المتحركة (تلاشي، انزلاق، ارتداد، دوران) أو ابدأ من الصفر بإضافة إطارات مفتاحية على الخط الزمني.
2. اضبط الخصائص عند كل إطار مفتاحي — التحويل والشفافية واللون والحجم — واضبط منحنى التسارع والمدة وعدد التكرارات.
3. عاين الرسوم المتحركة فوريًا، ثم انسخ كود @keyframes المُولّد أو حمّله كملف .css.

متى تستخدم

• إضافة حركات دخول لقسم البطل أو النوافذ المنبثقة أو البطاقات عند تحميل الصفحة.
• تصميم تفاعلات صغيرة للأزرار، كتكبير خفيف عند المرور بالمؤشر أو اهتزاز عند خطأ في النموذج.
• بناء نموذج أولي لأشرطة التحميل وحالات الـ skeleton قبل ربطها داخل إطار العمل.

النتيجة

يحتاج مطور واجهات أمامية إلى رسوم متحركة انسيابية لظهور بطاقات في صفحة معرض أعمال. يعدّ رسمًا متحركًا ease-out بمدة 0.6 ثانية يظهر تدريجيًا من 20 بكسل أسفل، ينسخ الكود ويطبقه بتأخير متدرج لكل بطاقة.

الأسئلة الشائعة

ما الفرق بين animations وtransitions في CSS؟

transitions تنتقل من الحالة A إلى الحالة B مرة واحدة عند مُحفِّز كالـ hover أو focus أو تغيُّر الـ class. animations تتبع قاعدة @keyframes بعدد خطوات وسيطة كما تريد، وتقدر تكرّر نفسها، وتبدأ عند تحميل الصفحة دون تدخّل المستخدم.

لماذا تعمل الحركة مرة واحدة ثم تختفي؟

العنصر يعود إلى أنماطه الأساسية عند انتهاء الحركة. اضبط animation-fill-mode على forwards ليبقى محتوى الإطار الأخير، أو على both إذا أردت تطبيق الإطار الأول أيضاً خلال أي تأخير.

أي منحنى تخفيف يعطي إحساساً طبيعياً؟

للحركات الداخلة، ease-out يبطّأ في النهاية فتبدو الحركة هادئة. للحركات الخارجة، ease-in يفعل العكس. cubic-bezier(0.34, 1.56, 0.64, 1) يعطي ارتداداً خفيفاً يبدو مرحاً دون مبالغة.

هل تعمل هذه الحركات على المتصفحات القديمة؟

@keyframes مدعومة في كل متصفح صدر بعد 2013 دون الحاجة لبادئة. إن كان جمهورك يستخدم IE 10 أو ما قبله فستحتاج البادئة -webkit-، لكن نسبتهم اليوم أقل بكثير من أن تستحق CSS إضافية.

كيف أجعل الحركة تتكرّر إلى الأبد؟

اضبط عدد التكرار على infinite وادمجه مع direction: alternate، فتنعكس الحركة في كل دورة وتحصل على ذهاب وإياب سلس (مثالي لـ pulse وshake) بدلاً من قفزة فجائية إلى البداية.

أدوات ذات صلة