المفاهيم الأساسية:
- خاصية الانتقال: تحدد أي خصائص تريد إضافة تأثير انتقال إليها.
- مدة الانتقال: تحدد الفترة الزمنية التي يستغرقها تأثير الانتقال.
- دالة توقيت الانتقال: تحدد معدل السرعة الذي يحدث به تأثير الانتقال.
- تأخير الانتقال: يحدد مقدار الوقت الذي ينتظر فيه المتصفح قبل بدء تأثير الانتقال.
خطوات عملية:
- حدد الخاصية: خصائص CSS التي تريد الانتقال بينها (مثل اللون والحجم والموضع).
- حدد القيمة: القيمة النهائية التي تريد أن تنتقل الخاصية إليها.
- حدد مدة الانتقال: الزمن الذي يستغرقه الانتقال (بالثواني).
- حدد دالة توقيت الانتقال: معدل السرعة الذي يحدث به الانتقال (اختياري).
- حدد تأخير الانتقال: المدة التي تنتظرها قبل بدء الانتقال (اختياري).
مثال CSS لإنشاء انتقال سلس:
.example {
transition: color 2s ease-in-out;
}
.example:hover {
color: red;
}
- عند تحريك مؤشر الماوس فوق العنصر
.example، سيتغير لونه إلى الأحمر بسلاسة على مدار ثانيتين.