transition

خاصية الانتقال الناعم transition

خاصية transition تحوّل تغيّرات القيم من قفزة فجة إلى انسياب ناعم — روح كل هفر أنيق بسطر واحد.

بدونها تغيّر الهفر فوري خشن؛ معها يعبر التغيير زمنًا محددًا بمنحنى تسارع. الصيغة: الخاصية المتحركة، المدة، المنحنى — وسمِّ خصائصك المقصودة بدل all الكسولة (تفاجئك بتحريك ما لم تقصد وتكلف أداءً).

أرقام الإحساس الصحيح: 150-200ms للهفر الفوري الاستجابة، و300ms للتحولات الأكبر، وease-out للحركات الداخلة. والاحتراف المكتمل يحترم مستخدمي تقليل الحركة عبر prefers-reduced-motion (كما بكل حركات هذا الموقع).

الصياغة

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); }

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .btn { display: inline-block; background: #7c5cff; color: white; padding: 12px 26px; border-radius: 12px; font-weight: bold; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
  .btn:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(124 92 255 / 0.5); }
</style>
<span class="btn">مرّر فوقي — انسياب لا قفزة</span>

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

أهم القيم

القيمة	الوظيفة
property duration easing	الثلاثي الأساسي: ماذا، كم، بأي إيقاع
150ms – 300ms	نطاق الويب الذهبي — الأبطأ «ثقيل» والأسرع خفي
ease / ease-out	منحنيات الطبيعية — out للداخل إلى الشاشة
خصائص متعددة بفواصل	لكل خاصية توقيتها الخاص

💡 نصائح عملية

حرّك opacity وtransform حصرًا حيث أمكن — تسريع عتادي بلا إعادة تخطيط
ضع transition على الحالة الأساسية لا على :hover — ليكون الرجوع ناعمًا أيضًا

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

transition: all — تحريك غير مقصود وفاتورة أداء
تحريك width/height/margin الغالية — استبدلها بـ transform

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

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