مولّد حركات CSS (Keyframe Animation)
مولّد حركات CSS يتيح لك اختيار نوع الحركة من 12 نمطًا جاهزًا (ظهور واختفاء تدريجي، انزلاق من أربع جهات، تكبير وتصغير، ارتداد، دوران للدخول، قلب أفقي وعمودي)، ثم ضبط المدة والتأخير ومنحنى التوقيت وعدد التكرارات، مع معاينة حية فورية وزر لإعادة تشغيل الحركة. يمكنك نسخ كود @keyframes الكامل مع قاعدة الحركة الجاهزة للاستخدام مباشرة. كل التوليد يتم داخل متصفحك، دون رفع أي بيانات لأي خادم.
يتم توليد الكود بالكامل داخل متصفحك، ولا يُرسل أي شيء لأي خادم.
كود CSS
@keyframes uddatakAnim {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animated-box {
animation: uddatakAnim 800ms ease-out 0ms 1;
}ما الذي تفعله هذه الأداة
تولّد شيفرة حركة CSS جاهزة من نوع حركة تختاره — ظهور وانزلاق وتكبير وارتداد ودوران وقلب — مع ضبط المدة والتأخير ومنحنى التسارع وعدد التكرار.
متى تستخدمها
- عنصر تريده يظهر بحركة عند تحميل الصفحة.
- إشعار أو نافذة تريدها تنزلق إلى مكانها.
- حركة متكررة للفت الانتباه إلى عنصر.
- تتعلّم بنية شيفرة الحركة في CSS.
طريقة الاستخدام
- اختر «نوع الحركة».
- اضبط «المدة» و«التأخير» و«دالة التوقيت» و«عدد التكرار».
- انسخ الشيفرة المولَّدة.
مثال عملي
المُدخَل
حركة انزلاق من اليسار بمدة قصيرة ومرة واحدة.
الناتج
شيفرة keyframes مع خصائص الحركة جاهزة للصق على العنصر.
حدود الأداة
- الحركات الكثيرة أو الطويلة تُبطئ الإحساس بالصفحة؛ الحركة القصيرة تخدم التجربة والطويلة تعطّلها.
- بعض المستخدمين يفعّلون تفضيل تقليل الحركة في نظامهم لأسباب صحية — احترام ذلك التفضيل مسؤوليتك في شيفرتك، والأداة لا تضيفه تلقائيًا.
- الحركة اللانهائية تستهلك موارد العرض باستمرار.
- الشيفرة للحركة نفسها؛ تشغيلها عند حدث معيّن يحتاج شيفرة إضافية.
الخصوصية والمعالجة
الشيفرة تُولَّد بالكامل داخل متصفحك ولا يُرسل شيء إلى خادم.
ملاحظات تقنية
- فصل المدة والتأخير ودالة التوقيت وعدد التكرار في الواجهة يطابق فصلها في CSS نفسها، فتفهم أي خاصية تعدّل لاحقًا.
الأسئلة الشائعة
نعم، خاصية @keyframes وanimation مدعومة في كل المتصفحات الحديثة دون الحاجة لأي بادئات خاصة.