منشئ الرسوم المتحركة CSS
اختر قالب keyframe جاهزًا — دوران، نبض، ارتداد، اهتزاز، تلاشٍ، انزلاق — واضبط المدة وعدد التكرارات، وانسخ @keyframes مع الفئة (class).
951 مشاهدة
حركات CSS
تجمع الحركة بين كتلة @keyframes (ما الذي يتغيّر) وخاصية animation (كيف تُشغَّل: المدة، التوقيت، عدد التكرارات). وخلافًا للانتقالات (transitions)، تعمل الحركات من تلقاء نفسها دون الحاجة إلى تمرير الفأرة أو تبديل فئة. يوفر هذا المولّد ستة قوالب جاهزة، ويُخرج كتلة keyframes وفئة CSS جاهزة للاستخدام معًا.
الأسئلة الشائعة
الحركة (animation) أم الانتقال (transition) — أيهما أختار؟
يستجيب الانتقال لتغيّر حالة (تمرير الفأرة، تبديل فئة). أما الحركة فتعمل من تلقاء نفسها، ويمكن أن تتكرر إلى ما لا نهاية وتُعرّف عدة خطوات — استخدمها لعناصر التحميل الدوّارة، ونبضات لفت الانتباه، وتأثيرات الظهور.
كيف أراعي المستخدمين الذين يفضّلون حركة أقل؟
ضع الحركة داخل @media (prefers-reduced-motion: no-preference) { … } أو عطّلها في النسخة المخفَّضة — سيقدّر ذلك المستخدمون الحساسون للدوار الدهليزي.
أدوات مشابهة
الإبلاغ عن مشكلة
منشئ الرسوم المتحركة CSS
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!