في هذا الدرس 6تصفّح المواضيع
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؟
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.
CSS transition with multi values
قيم متعددة مع خاصية transition في لغة CSS
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
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
CSS transition transform خاصية transform مع خاصية transition في لغة CSS
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
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;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات20
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Transitions إنتقالات
- للمراجعة
- 02 Delay التأخير
- للمراجعة
- 03 Duration المدة الزمنية
- للمراجعة
- 04 Property خاصية
- للمراجعة
- 05 Timing التوقيت
- للمراجعة
- 06 Function الوظيفة
- للمراجعة
- 07 How to Use كيفية إستخدام
- للمراجعة
- 08 Values قيم
- للمراجعة
- 09 Change تغيير
- للمراجعة
- 10 Several العديد من
- للمراجعة
- 11 Specify تحديد
- للمراجعة
- 12 Speed السرعة
- للمراجعة
- 13 Curve منحنى
- للمراجعة
- 14 Ease يسهل
- للمراجعة
- 15 Linear خطي
- للمراجعة
- 16 Cubic مكعب
- للمراجعة
- 17 Transformation تحولات
- للمراجعة
- 18 Examples أمثلة
- للمراجعة
- 19 More مزيد
- للمراجعة
- 20 Shorthand إختصار
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي4 أسئلة تنتظرك ＋
ماهي الخاصية التي تستخدم في تحديد المدة التي يتم خلالها ال transition ؟
____ماهي الخاصية التي تستخدم في تحديد الفترة التي يتم تحديدها قبل حدوث ال transition ؟
تحدد الخاصية ..................... نوع ال transition ويمكن ان تأخذ عدة قيم منهم (linear , ease , ease-in ) فما هي ؟
نستطيع اضافة جميع خصائص ال transition باستخدام خاصية واحده فما هي ؟
____