CSS Transitions
الانتقالات في لغة CSS
سوف تتعلم في هذا الدرس الانتقالات من حجم إلي حجم أو من لون إلي لون أو من مكان إلي مكان أخر عن طريق خاصية transitions في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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.
div
{
width: 120px;
height: 120px;
background: #007bff;
transition: width 2s;
transition-delay: 1s;
}
</>
CSS transition transform
خاصية transform مع خاصية transition في لغة CSS
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
خصائص transition في لغة CSS.
div
{
width: 100px;
height: 100px;
background: #007bff;
transition-property: width;
transition-duration: 2s;
transition-delay: 1s;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
