مولّد رسوم متحركة CSS — بناء حركات Keyframe

مولّد رسوم متحركة CSS مجاني. أنشئ حركات keyframe مع معاينة مباشرة — انسخ كود CSS فوراً. 100% في متصفحك.

🔒 100% Private
Completely Free
🌐 Runs in Browser
📦 Export Ready

مولّد رسوم متحركة CSS — بناء حركات Keyframe

Tool Workspace

Ready

جاري تحميل الأداة...

  1. اختر النوع — ارتداد أو تلاشي أو انزلاق أو دوران أو تكبير أو اهتزاز.
  2. حدد المدة — من 0.1 إلى 5 ثوانٍ.
  3. اختر دالة التوقيت — ease أو linear أو cubic-bezier.
  4. حدد التكرار — مرة أو مرتين أو لا نهائي.
  5. اختر الاتجاه — عادي أو عكسي أو متناوب.
  6. معاينة مباشرة — شاهد الحركة فوراً.
  7. انسخ CSS — انسخ الكود الكامل.

مولّد رسوم متحركة CSS — بناء حركات بصرية

مولّد الرسوم المتحركة CSS من Serverless Tools هو أداة مجانية لإنشاء حركات keyframe مع معاينة مباشرة. بدلاً من كتابة قواعد @keyframes يدوياً، توفر هذه الأداة عناصر تحكم بديهية مع ملاحظات بصرية فورية.

الميزات الرئيسية

  • 8 حركات جاهزة — ارتداد وتلاشي وانزلاق ودوران وتكبير واهتزاز ونبض وانقلاب.
  • مدة قابلة للتعديل — من 0.1 إلى 5 ثوانٍ.
  • دوال التوقيت — ease وease-in وease-out وlinear وcubic-bezier.
  • تحكم في التكرار — مرة أو متعدد أو لا نهائي.
  • معاينة مباشرة — شاهد الحركة فوراً.
  • كود CSS كامل — @keyframes وخاصية animation.
  • خصوصية 100% — لا خادم مطلوب.

حالات الاستخدام

  • مصممو الويب — حركات دخول للأقسام والبطاقات.
  • مطورو الواجهة — كود حركات جاهز للإنتاج.
  • صفحات الهبوط — حركات تجذب الانتباه.

الخصوصية

تتم جميع العمليات محلياً في متصفحك دون إرسال بيانات.

Frequently Asked Questions

ما هي حركات keyframe في CSS؟

حركة keyframe تعرّف أنماط CSS في نقاط مختلفة أثناء تسلسل الحركة باستخدام @keyframes. خاصية animation تطبق هذه على العنصر.

هل يمكنني إنشاء حركات مخصصة؟

نعم. توفر الأداة حركات جاهزة يمكن تعديلها في الكود لتأثيرات مخصصة.

هل بياناتي خاصة؟

نعم. كل شيء في متصفحك. لا تُرسل بيانات لأي خادم.

هل أحتاج بادئات المتصفحات؟

لا. المتصفحات الحديثة لا تحتاج بادئات لحركات CSS. الكود المولّد يستخدم صيغة قياسية.