CSS

CSS Transitions
الانتقالات في لغة CSS

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

التاريخ

29 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1587

المواضيع

24
الشروحات chevron_left CSS Transitions chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Transitions
الانتقالات في لغة CSS

</> CSS Transitions
الانتقالات في لغة CSS

تستخدم transitions في لغة CSS ليحدث تأثير وانتقال بين لونين أو بين مكان الي مكان أخر أو بين حجمين من حجم صغير إلي حجم كبير في مدة زمنية محددة.


خصائص transition في لغة CSS:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

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

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

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

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

transition: width 2s;

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

CSS transitions

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

div
{
  width: 120px;
  height: 120px;
  background: #007bff;
  transition: width 2s;
}
ملاحظة

إذا لم يتم إضافة مدة لخاصية transition، فلن تعمل الخاصية ولا يحدث أي تأثير ، لأن القيمة الافتراضية هي 0.

</> CSS transition with multi values
قيم متعددة مع خاصية transition في لغة CSS

يضيف المثال التالي تأثير انتقال لكل من خاصية العرض والارتفاع ، بمدة ثانيتين للعرض و 4 ثوانٍ للارتفاع:

CSS transition with multi values

قيم متعددة مع خاصية transition في لغة CSS.

div
{
  width: 120px;
  height: 120px;
  background: #007bff;
  transition: width 2s, height 5s
}

</> CSS transition delay
تأخير transition في لغة CSS

تستخدم خاصية transition-delay جنباً إلي حنب مع خاصية transition لتأخير تأثير الناتج عن خاصية transition لعدد ثوان محدد والقيمة تكون رقم متبوعاً بحرف s يرمز seconds.

CSS transition delay

تأخير transition في لغة CSS.

div
{
  width: 120px;
  height: 120px;
  background: #007bff;
  transition: width 2s;
  transition-delay: 1s;
}

</> CSS transition transform
خاصية transform مع خاصية transition في لغة CSS

يمكن استخدام خاصية transform مع خاصية transition في لغة CSS لعمل rotate تدوير للعنصر في خلال مدة زمنية وهي أن يبدأ العنصر التدوير من صفر درجة إلي 180 درجة.
CSS transition transform
CSS transition transform

خاصية transform مع خاصية transition في لغة CSS.

div
{
  width: 120px;
  height: 120px;
  background: #007bff;
  transition: transform 3s;
  margin:50px 0 0 50px;
}

</> CSS transition properties
خصائص transition في لغة CSS

خاصية transition هي اختصار إلي ثلاثة خصائص وهم [transition-property - transition-duration - transition-delay] في لغة CSS.

CSS transition properties
CSS transition properties

خصائص transition في لغة CSS.

div
{
  width: 100px;
  height: 100px;
  background: #007bff;
  transition-property: width;
  transition-duration: 2s;
  transition-delay: 1s;
}
مصطلحات الدرس
Transitions
Transitions

إنتقالات

Delay
Delay

التأخير

Duration
Duration

المدة الزمنية

Property
Property

خاصية

Timing
Timing

التوقيت

Function
Function

الوظيفة

How to Use
How to Use

كيفية إستخدام

Values
Values

قيم

Change
Change

تغيير

Several
Several

العديد من

Specify
Specify

تحديد

Speed
Speed

السرعة

Curve
Curve

منحنى

Ease
Ease

يسهل

Linear
Linear

خطي

Cubic
Cubic

مكعب

Transformation
Transformation

تحولات

Examples
Examples

أمثلة

More
More

مزيد

Shorthand
Shorthand

إختصار

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.