انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: الانتقالات في لغة CSS

How to Use CSS transitions؟ كيف يتم استخدام CSS transitions؟

سوف تتعلم في هذا الدرس الانتقالات من حجم إلي  حجم أو من لون إلي لون أو من مكان إلي مكان أخر عن طريق خاصية  transitions في لغة CSS.

1 صفوف تعليمية
لغة CSS
4,248 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لإنشاء تأثير transition انتقال transition جيب تحديد:

  • خاصية من خصائص CSS التي سوف تحدد التأثير.
  • المدة التي يحدث التأثير خلالها.

CSS transition syntax

طريقة كتابة خاصية transition في لغة CSS.

HTML 
transition: width 2s;

تبدأ خاصية transition بالتأثير عندما تتغير قيمة width والتغير يمكن أن ينتج عن hover لاحظ المثال التالي عند تمرير مؤشر mouse علي div سوف تبدا خاصية transition بالعمل.

جرّب بنفسك

CSS transitions

قم بتمرير مؤشر mouse أعلي div حتي تشاهد تأثير CSS transitions.

HTML 
div
{
  width: 120px;
  height: 120px;
  background: #007bff;
  transition: width 2s;
}
جرّب بنفسك

جميع فقرات هذا الدرس (الانتقالات في لغة CSS)