الإعلام الآلي — CSS3: الحركات والانتقالات Animations و Transitions — السنة الرابعة متوسط — المنهاج الجزائري

CSS3: الحركات والانتقالات (Animations و Transitions)

CSS3 يوفر إمكانيات متقدمة لإنشاء تأثيرات حركية وانتقالات سلسة دون الحاجة إلى JavaScript. هذا يحسن تجربة المستخدم ويجعل الموقع أكثر ديناميكية.

الانتقالات (Transitions)

تسمح بتغيير سلس بين حالتين للعنصر عند حدوث حدث (مثل تمرير الماوس).

.button {

background-color: blue;

transition: background-color 0.3s ease;

}

.button:hover {

background-color: red;

}

التحويلات (Transforms)

تغيير شكل وموقع العنصر دون التأثير على تخطيط الصفحة.

.box:hover {

transform: scale(1.2) rotate(45deg);

}

أنواع التحويل: rotate (تدوير)، scale (تكبير/تصغير)، translate (نقل)، skew (إمالة).

الحركات (Animations)

@keyframes slideIn {

from { transform: translateX(-100px); opacity: 0; }

to { transform: translateX(0); opacity: 1; }

}

.element {

animation: slideIn 1s ease-in-out;

}

تمارين

التمرين 1: أنشئ زراً يتغير لونه تدريجياً عند تمرير الماوس باستخدام transition.

التمرين 2: أنشئ حركة CSS تجعل عنصراً يدور 360 درجة ثم يعود إلى وضعه الأصلي.

للمزيد من الدروس، راجع درس CSS3 Flexbox و Grid ودرس CSS: تنسيق صفحات الويب.