91. مقدمة في انتقالات CSS

تسمح الانتقالات بتغيير الخصائص بسلاسة عبر مدة زمنية، بدلاً من حدوثها فوراً، مما يخلق تغذية راجعة مرئية وتجربة مستخدم مصقولة (على سبيل المثال، زر يتغير لونه بسلاسة عند تمرير الماوس).

خصائص الانتقال الأربعة

لتعريف انتقال، يجب عليك تحديد ما تريد نقله، ولمدة كم.

1. transition-property

تحدد أي خاصية CSS يجب تحريكها. يمكنك سرد خصائص متعددة أو استخدام all.

2. transition-duration

تحدد المدة التي يجب أن يستغرقها الانتقال (بالثواني s أو الملي ثانية ms).

مثال

css .button { background-color: red; padding: 10px;

/* اجعل تغيير لون الخلفية يستغرق 0.5 ثانية */ transition-property: background-color; transition-duration: 0.5s; }

.button:hover { background-color: blue; /* سيكون التغيير من الأحمر إلى الأزرق سلساً */ }

ملاحظة: الخصائص التي تنتقل بشكل جيد هي تلك ذات القيم العددية المستمرة (اللون، الحجم، الموضع، الشفافية). الخصائص التي تتغير بشكل منفصل (مثل display: none إلى display: block) لا يمكن عمل انتقال لها.