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

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

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

• property: خاصية CSS التي تريد تطبيق transition عليها (مثلًا: background-color، width، opacity).
• duration: الوقت الذي تستغرقه transition حتى تكتمل (مثلًا: 1s لمدة ثانية واحدة).

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

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

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

عند hover فوق button، سيتغير background color الخاص به من green إلى blue خلال 0.3 ثانية.