مولّد الرسوم المتحركة CSS
ينشئ مولد حركات CSS حركات @keyframes من 14 إعدادًا جاهزًا مثل fade in وslide in وbounce in وpulse وspin وshake وzoom، مع التحكم في المدة ودالة التوقيت وعدد مرات التكرار.
حول هذه الأداة
ينشئ مولد حركات CSS حركات @keyframes من 14 إعدادًا جاهزًا مثل fade in وslide in وbounce in وpulse وspin وshake وzoom، مع التحكم في المدة ودالة التوقيت وعدد مرات التكرار.
طريقة الاستخدام
- اختر إعداد حركة جاهزًا.
- حدد المدة ودالة التوقيت وعدد مرات التكرار.
- اضغط Replay لمعاينتها.
- انقر Copy CSS للحصول على @keyframes وقاعدة animation.
معلومات مفيدة
- تتكون حركة CSS من جزأين: قاعدة @keyframes وخاصية animation على العنصر.
- تحريك transform وopacity هو عادةً الخيار الأكثر سلاسة من حيث الأداء.
- دوال التوقيت مثل ease-out تبدأ سريعة ثم تتباطأ، وهذا يبدو طبيعيًا لحركات الظهور.
- احترم استعلام الوسائط prefers-reduced-motion للمستخدمين الذين طلبوا تقليل الحركة.
- يناسب عدد التكرار infinite مؤشرات التحميل، بينما تعمل تأثيرات الظهور عادةً مرة واحدة.
تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.
الأسئلة الشائعة
كيف أنشئ حركة CSS؟
عرّف الحركة في قاعدة @keyframes، ثم اربطها بالعنصر عبر animation: name duration timing iteration. ويكتب المولد الاثنين لك.
ما الفرق بين transitions وanimations في CSS؟
تحرّك transitions العنصر بين حالتين عند تغيّر خاصية ما، كما عند التمرير بالمؤشر. أما animations فتستخدم keyframes، ويمكن أن تعمل تلقائيًا وتتكرر.
كيف أجعل الحركة تتكرر إلى ما لا نهاية؟
اضبط عدد التكرار على infinite، مثل animation: spin 1s linear infinite.
هل تؤثر حركات CSS على إمكانية الوصول؟
قد تزعج الحركة الكبيرة أو المستمرة بعض المستخدمين. ضع الحركات غير الضرورية داخل @media (prefers-reduced-motion: no-preference).