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

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

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

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

property: خاصية CSS التي تريد إجراء انتقال لها (على سبيل المثال، background-color، width، opacity).
duration: الوقت الذي يستغرقه الانتقال ليكتمل (على سبيل المثال، 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 إلى .card بحيث تحدث التغييرات في لون الخلفية و box-shadow بسلاسة خلال 0.4 ثانية مع وظيفة توقيت ease.

جرّب بنفسك

<!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>