الانتقالات وتأثيرات الحوم

جزء من قسم إتقان CSS في رحلة HTML على Coddy. الدرس 24 من 43.

يتيح لك الانتقال تغيير خاصية بسلاسة مع مرور الوقت بدلًا من تغييرها فورًا.

selector {
  transition: property duration timing-function delay;
}

الخاصية: خاصية CSS التي تريد إجراء انتقال عليها (مثل background-color وwidth وopacity).
المدة: الوقت اللازم لاكتمال الانتقال (مثل 1s لمدة ثانية واحدة).

timing-function: كيفية تقدّم الانتقال (مثلًا: linear وease وease-in).
delay: مدة الانتظار قبل بدء الانتقال (اختياري).

على سبيل المثال:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

عند تمرير المؤشر فوق الزر، سيتغير لون خلفيته من الأخضر إلى الأزرق خلال 0.3 ثانية.

للانتقال بين أكثر من خاصية، أدرجها في تصريح transition واحد، وافصل بينها بفواصل (فسطر transition ثانٍ سيحل محل الأول):

transition: width 0.3s ease, opacity 0.3s ease;

التحدي

سهل

أضف الخاصية transition إلى .card بحيث تحدث التغييرات على لون الخلفية وbox-shadow بسلاسة خلال 0.4 ثانية باستخدام دالة التوقيت ease.

ثم أضف قاعدة .card:hover تغيّر لون خلفية البطاقة وbox-shadow، حتى يكون لدى الانتقال شيء لتحريكه.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>