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

جزء من قسم 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.

ورقة مرجعية

يسمح لك الانتقال (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;
}

جرّب بنفسك

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

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.