Softonic

مولّد CSS Animation

خطوة 1 / 2
إعداد مسبق
التالي

كتابة @keyframes من الصفر عمل شاق: تختار النسب المئوية، وتخمّن الخصائص، وتعيد التحميل، وتشاهد، وتعدّل. يقدم هذا المولد ست حركات جاهزة (تلاشي، انزلاق للأعلى، ارتداد، دوران، نبض، اهتزاز) ويتيح لك ضبط اسم الحركة ومدتها وتنعيمها وعدد تكراراتها واتجاهها. تُعرض النتيجة لحظيًا، وعندما ترضيك يمكنك نسخ كتلة @keyframes المولدة وخاصية animation المختصرة.

كيفية إنشاء حركة CSS

  1. 1

    اختر قالبًا جاهزًا

    اختر واحدة من الحركات الست المدمجة: تلاشي، انزلاق للأعلى، ارتداد، دوران، نبض أو اهتزاز.

  2. 2

    سمِّ الحركة

    أعطِ keyframes معرّف CSS صالحًا، مثل `cardIn` أو `fadeIn`. يُستخدم الاسم نفسه في الخاصية المختصرة `animation`.

  3. 3

    اضبط التوقيت والتكرار

    المدة بالثواني، ووظيفة التنعيم (ease أو ease-in أو ease-out أو ease-in-out أو linear أو spring)، وعدد التكرارات (1 أو 2 أو 3 أو infinite)، والاتجاه (normal أو reverse أو alternate أو alternate-reverse).

  4. 4

    انسخ CSS

    قاعدة `@keyframes` المولدة وخاصية `animation:` المختصرة جاهزتان للصق في ورقة الأنماط.

تشريح الحركة

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

ثماني خصائص في الصيغة المختصرة: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

خيارات التنعيم

يقدم المولد ست دوال تنعيم:

التنعيم cubic-bezier() الإحساس
linear لا ينطبق سرعة ثابتة
ease-in 0.42, 0, 1, 1 بداية بطيئة ونهاية سريعة
ease-out 0, 0, 0.58, 1 بداية سريعة ونهاية بطيئة
ease-in-out 0.42, 0, 0.58, 1 بطيء-سريع-بطيء
ease (افتراضي) 0.25, 0.1, 0.25, 1 افتراضي ناعم
spring 0.68, -0.55, 0.27, 1.55 يتجاوز الهدف ثم يستقر

حرّك الخصائص الصحيحة

يستطيع المتصفح تحريك أي خاصية، لكن عددًا قليلًا منها فقط يتحرك بسلاسة على معالج الرسومات دون إحداث تغيير في التخطيط أو الرسم:

رخيصة (دمج فقط): transform وopacity وfilter.

مكلفة (تخطيط/رسم): width وheight وtop وleft وmargin وpadding وbackground-color.

الحركات بمعدل ستين إطارًا في الثانية عبر width وtop ممكنة على العناصر الصغيرة، لكنها تتعثر على الجوال إذا حركت الكثير منها دفعة واحدة. للحركات المعقدة، فضّل دائمًا transform: translate(...) على top / left، وtransform: scale(...) على تغيير العرض أو الارتفاع.

will-change: استخدمه باعتدال

إخبار المتصفح بحجز طبقة دمج مسبقًا يمكن أن يحسّن السلاسة:

.card { will-change: transform; }

لكنه يستهلك الذاكرة. طبّقه قبل انطلاق الحركة مباشرة وأزله بعد انتهائها. تعيين will-change: transform بشكل دائم على عناصر كثيرة قد يضر أكثر مما ينفع.

تقليل الحركة

بعض المستخدمين حساسون للحركة ويضبطون تفضيلات النظام:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

احترم هذا الإعداد. قدّم تغييرًا فوريًا للحالة أو تلاشيًا خفيفًا جدًا كبديل.

الأسئلة الشائعة

استخدم CSS للحركة البسيطة التصريحية لمرة واحدة. واستخدم Web Animations API (element.animate()) للتحكم بالوقت عبر JavaScript، وkeyframes الديناميكية، والإيقاف المؤقت، والتحكم بالتشغيل. كلاهما يعمل على وحدة الدمج، ولا يوجد بينهما فرق سرعة جوهري.

في الغالب لأنك تحرّك خاصية تُحدث تغييرًا في التخطيط (width أو top أو margin) بدلًا من transform. انتقل إلى translate() وscale() وسيختفي التقطيع عادةً.

نعم، animation: a 1s, b 1s 1s, c 1s 2s; تشغّل ثلاث حركات بالتتابع عبر تأخيرات متدرجة. هذا المولد ينتج حركة واحدة، لذا أضف الإدخالات الإضافية إلى الخاصية المختصرة بنفسك. للحركات الأكثر تعقيدًا، استخدم Web Animations API أو مكتبة مثل GSAP.

تجعل العنصر يأخذ حالة from قبل بدء الحركة (أثناء التأخير) ويحتفظ بحالة to بعد انتهائها. بدون both، يعود العنصر إلى نمطه السابق للحركة عند انتهائها. يحافظ المولد على الصيغة المختصرة بأقل قدر ممكن، لذا أضف fill mode بنفسك إذا احتجت إليه.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

عارض ملفات HAR

افتح تسجيلات شبكة HAR محليًا، وصفِّ الطلبات، وافحص الرؤوس المحجوبة والتوقيتات، وصدِّر ملخصات منقحة من دون رفع الملف.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

الأداة متاحة بلغات أخرى