CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}حول هذه الأداة
يتيح مُنشئ رسوم CSS المتحركة إنشاء رسوم متحركة سلسة من خلال تكوين إعدادات keyframe والتوقيت والمدة والتأخير والتكرارات. تعرض المعاينة المباشرة الرسوم المتحركة.
رسوم CSS المتحركة التي تستخدم transform و opacity فعّالة لأنها مُركّبة على GPU ولا تُشغّل تغييرات التخطيط أو إعادة الرسم.
كيفية الاستخدام
- اختر نوع الرسوم المتحركة من القائمة المنسدلة.
- حدد المدة (مثلاً 0.5s، 2s).
- اختر دالة توقيت للتحكم في التسهيل.
- حدد اختياريًا تأخيرًا قبل بدء الرسوم المتحركة.
- حدد عدد التكرارات (رقم أو infinite).
- انقر على إعادة التشغيل للمعاينة، ثم نسخ لتصدير CSS.
حالات الاستخدام
يستخدم مطورو الواجهة الأمامية رسوم التلاشي والانزلاق لتحسين الأداء المُدرَك. يقوم مصممو UI بنمذجة التفاعلات الصغيرة مثل نبض الأزرار.
الأسئلة الشائعة
- ما هو fill-mode: both؟ — تُطبق الرسوم المتحركة أنماط البداية قبل البدء وتحتفظ بأنماط النهاية بعد الانتهاء. هذا هو الإعداد الأكثر فائدة.
- كيف أجعل الرسوم المتحركة تتكرر إلى الأبد؟ — اضبط عدد التكرارات على infinite.
- هل رسوم CSS المتحركة أفضل من JavaScript؟ — للتأثيرات البسيطة، تُفضَّل رسوم CSS المتحركة. للتسلسل المعقد أو التفاعلية، يوفر JavaScript تحكمًا أكبر.