animation

خاصية الحركة المفتاحية animation

خاصية animation تشغّل حركات keyframes متعددة المراحل تعمل وحدها — نبض ودوران وظهور متدرج بلا جافاسكريبت.

بينما تحتاج transition «حدثًا» يطلقها (هفر، تغيير كلاس)، تعمل animation ذاتيًا وفق سيناريو @keyframes تكتبه بمراحل من 0% إلى 100%. عدّتها: الاسم والمدة والتكرار (infinite للدائمة) والمنحنى — وقيمة both المهمة تُبقي العنصر على شكل نهاية الحركة.

الكلاسيكيات: spinner دوار، نبضة تنبيه pulse، وظهور المحتوى fade-in-up (حركة تبويبات لوحة تحكم هذا الموقع نفسها). ودائمًا خلف حارس prefers-reduced-motion احترامًا لمن تدوخهم الحركة.

الصياغة

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.panel { animation: fade-up 0.3s ease both; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  .p { display:inline-grid; place-items:center; width:70px; height:70px; border-radius:50%; background:#7c5cff; color:white; margin:8px; animation: pulse 1.6s ease-in-out infinite; }
  .s { display:inline-block; width:34px; height:34px; border:4px solid #ede9fe; border-top-color:#7c5cff; border-radius:50%; animation: spin 0.9s linear infinite; vertical-align:middle; }
</style>
<span class="p">نبض</span> <span class="s"></span> ← spinner خالص CSS

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
@keyframes	سيناريو المراحل — from/to أو نسب مئوية
infinite	تكرار أبدي — spinners ونبضات
both	تطبيق شكل البداية قبل التشغيل والنهاية بعده
animation-delay	تأخير — تتابع عناصر القوائم المتدرج

💡 نصائح عملية

حرّك transform وopacity داخل keyframes حصرًا — نفس قاعدة الأداء الذهبية
لفّ حركاتك بـ @media (prefers-reduced-motion: no-preference) — احتراف واحترام

⚠️ أخطاء شائعة

نسيان both فيرتد العنصر لحالته الأصلية بنهاية الحركة فجأة
حركات لانهائية صاخبة بكل زاوية — الضجيج عكس الحيوية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs