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

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

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

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

النتيجة

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

أدوات ذات صلة