✨ مولد رسوم CSS — keyframes جاهزة
مولد رسوم متحركة CSS مع 12 تأثيراً جاهزاً (fade, slide, bounce, pulse, shake, spin) والتحكم في المدة والتأخير ودالة التوقيت.
▶
📚 عن هذه الأداة
الرسوم المتحركة CSS تستخدم keyframes لتعريف حالات وانتقالات. animation:
❓ أسئلة شائعة
animation أم transition؟
transition للتغيير بين حالتين على hover/focus. animation لتسلسلات متعددة الخطوات تعمل تلقائياً.
كيف أوقف رسماً متحركاً؟
animation-play-state: paused — استأنف بـ running.
هل تأثر الرسوم على الأداء؟
استخدم transform و opacity فقط للحصول على رسوم سلسة (GPU-accelerated). تجنب رسم width/height/top/left.
كيف أُكرر إلى الأبد؟
استخدم iteration-count: infinite.