مولّد حركات CSS

يتيح لك مولّد رسوم CSS المتحركة إنشاء وتخصيص رسوم @keyframes متحركة في CSS دون كتابة التعليمات البرمجية من الصفر. اختر من بين رسوم متحركة جاهزة (تلاشٍ، انزلاق، ارتداد، إلخ)، وعدّل إعدادات التوقيت والمدة والتكرار، وعاين النتيجة في الوقت الفعلي، وانسخ كود CSS الناتج مباشرة إلى مشروعك.

تصفح جميع أدوات مولّد

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

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

حالات الاستخدام الشائعة

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