Learn CSS In Arabic 2021 - #42 - Transition

[@gamerr555]

الأن بدأت اتعمق اكثر واكثر في المجال وعم افهم اكثر نصيحة لكل اخ كل مادرست اكثر تتعمق اكثر وتفهم المجال اكثر توكلو على الله وحضرو الدروس واذا مافهمتو عيدو الدرس وطبقو عملي وعيدوه مرا ومرتين رح تتعلمو بتوفيق للجميع

[@ahmedalrahmany594]

Thank you for your advice ❤❤

[@ahmedm6644]

النقاط التي ناقشها الفيديو:
ما هو ال transition. و: 0:21
خاصية ال transition-duration. و: 1:21
خاصية ال transition-delay. و: 2:40
خاصية ال transition-property. و: 3:40
الخاصية التي تدعم ال transition. و: 4:47
خاصية ال transition-timing-function. و: 5:47
اختصار خواص ال transition. و: 9:26

[@mohabnsr2929]

منيره المهديه بجد فصلتنى ضحك😂😂😂😂😂😂😂😂😂😂

[@hosamabdulmaged2936]

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

[@unlimited_varieties]

تستحق لقب بروفيسور :D
ترجم الفيديوهات بالترجمة الالية الى لغات اخرى لتفيد و تستفيد بصورة اوسع شكرا جزيلا لكم

[@hashafai1934]

في الدقيقة 2:20 انا مت من الضحك
جزاك الله خير و انشاء الله مستمر معك الى ان اصبح مطور ويب متكامل

[@mohammedhassona99]

شوقتني قبل م ابدا الفيديو شو حكى ههههههه

[@s.7ps]

ههههههههه

[@Sxheyfnnfnf]

ME TO hhhhhhh

[@Nebrass_]

ههههه

[@afnanalabi9102]

والله وأنا كمان 😹😹

[@alialazawi2849]

transition-timing-function
Ease (Default): Slow, Fast, Slow
Ease-in: Slow, Fast
Ease-out: Fast, Slow
Linear: Same speed in all time

[@sondos1606]

من اكثر الدروس الممتعة واللي مفهومة ومن اول مرة بنسبة 100%, جزاك الله عنا كل الخير

[@branme3506]

اشكرك على ما تقدم من فائدة لي و للناس الله يجعل نشرك للعلم سبب في دخولك الجنة

[@Aziz-kw6ct]

شكرا علي الفيديوهات الجميله دي كلها ، انت شخص عظيم ، ربنا يسعدك ويجازيك خير عن كل المجهود ده

[@moabuelhamd5175]

السلام عليكم مشاء الله افضل شرح برمجه علي اليوتيوب الله يباركلك
حاول تستخدم لون اوضح من كدا في الباك جروند عشان فيه شاشات الون مش بيبان فيها بتكون جودتها في الrgb ضعيفه شويه وبتكون كلها شبه بعض..
عشان الكل يستفاد شكرا.

[@houdasidahmed1626]

ease-in-out
Equal to cubic-bezier(0.42, 0, 0.58, 1.0), starts transitioning slowly, speeds up, and then slows down again. يعني سريعة في النص

[@salmamousaad]

جزاك الله خيرا ❤️

[@alaaali1824]

ربنا يجزيك كل خير ياباش مهندس اسامة

[@VeNus-el4cf]

Lesson 42 done alhamdulilah❤

[@CoffeineCode15]

خلاص فاضل تكة ع المليون هفرحلك لما تستلم الدرع الله معك ويوفقنا جميعااا

[@wissam_zidan]

المتعة بهالفيديو مو طبيعية🔥💜
شكرآ ألك

[@malekalganadi1712]

ربنا يسعدك و يعطيك الصحة ويجعل حياتك سعيدة دائماً

[@elaraishimohamed5703]

2:22 😂😂😂😂😂 عسل يا هندسه

[@athraahassan-z1z]

الدروس صارت احلىىىى هوايي😍

[@منوعات-ظ3غ2ذ]

لهجتك اللي احلي هوايي

[@Amr_Salama]

اعانك الله وسدد خطاك وجعله فى ميزان حسناتك يوم ان تلقاه

[@AhmedMahmoudMMD]

اللهم صل وسلم علي سيدنا محمد

[@NaelAbuanza]

ربنا يديمك يا هندسة الله يديم خيرك وعزك

[@ibrahimnassar2129]

4:32 الموقع عمال يرقص 🤣🤣🤣
دمك خفيف اوي ❤️

[@nouraaldossry8039]

😂😂😂😂 متت

[@afnanalabi9102]

😹 ايه و الله

[@Sostrong2000]

السلام علیکم و رحمة الله جمیعا
ارجو من الطلبة عدم الاکتفاء بالمشاهدة و التعلیم، بل السعی ایضا لتعویض جهود الاساتذة الکرماء الذین یجندون طاقاتهم و اوقاتهم لتعلیمنا بالمجان و دون ای مقابل بالطرق التالیة:
۱- مشاهدة جمیع الاعلانات للآخر فی بدایة و نهایة الفیدیوهات
۲- لایک و تعلیق علی کل فیدیو قبل مشاهدة الدرس
۳- نشر صفحة الاستاذ مع رسالة امتنان ولو لمرة واحدة فی ای صفحة تملکونها علی مواقع التواصل الاجتماعی، بهذه الطریقه لعلکم تنفعون أناس آخر بالتعرف علی المحتوی القیم و الاستفادة منه.

[@zezeseshill3032]

هههههههه انام جنبو والله بحبك كثير استاذنا اسامه

[@rodwangd2683]

صلوا على الحبيب المصطفى صلى اله عليه وسلم

[@zafershoaybi]

عالمي يا هندسة❤

[@مصطفياحمد-ن2ذ3ه]

اقسم بالله انت مهندس عسل

[@mohamed.mowafy]

أنت مبدع 💞🌹
ما شاء الله لا قوة إلا بالله

[@yaseenhasan8345]

الله يسامحك بس على منيرة مهندية رحت ابحث عنها وياريتني ما بحثت ههههههههههههههههههه
الله يعطيك الف عافية ما شاء الله عليك هكر

[@yousefsoof2984]

The King of CSS

[@kareemayman.2yk648]

I love you man so much

[@heshamelsharkawy1216]

جزاك الله خيراً

[@mohamednasr1671]

الفيديو دا عظمه بجد

[@ryanawaji7666]

مين دي منيرة المهدية هههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههه 🤣🤣🤣🤣🤣 احلى استاذ اسامة ...

[@Artyon]

جزاك الله خيرا. شكرا جزيلا

[@rafatkhtab2436]

فنان انت

[@mahmoudshendy7476]

منيره المهديه عامله شغل جامد 😁😁

[@houdasidahmed1626]

hhhhhhhhhhhhhhhhhh funny munira el mahdia ,I'm from algeria you are gr8

[@AHMEDELDEEB-x6t]

ده كلام جميل مقدرش اقول حاجه عنه😂😂😂

[@TarekYahia-w2c]

هو ازاى الصندوق كبر بالرغم انه مخترضش العرض؟ و فقط لغى عنصر الوقت؟
كلامى من دقيقه 5:07

[@ismaelelshamy]

خلفية الانيميشن مش واضحه للاسف كنت غيرت اللون لتكون اوضع ومشكور علي المجهود الجبار

[@kareemayman.2yk648]

keep going

[@mohammadreziq4797]

الله يجزيك الخير

[@moathahmed2360]

جزاكم الله كل الخير

[@ameenfiras]

شكرا جزيلا 🌹🌹🌹🌹🌹

[@ismaelahmed-su3ep]

مين منيره المهديه دي يارجاله ولا دي بردك محتاجه سيرش 😂😂😂😂😂😂

[@son11236]

الله يجازيك كل خير

[@ahmadbenchakhtir]

شكرا 🤍.

[@قناةأسوديوعبوديالتربوية]

استاذ اسامة لو تكرمت
كيف ممكن عمل
transition
لأكثر من عنصر مكون من اب وابن او اكثر وكل عنصر يتحرك بشكل مختلف عن الآخر بعملية
hover
واحدة ؟؟؟
ياريت توضحها مع كتابة البنية السليمة. وجزاك الله خيرا

[@bodetarek7657]

ارجو الرد لأني في التاسك الاول مش عارف اعملها

[@anascoder]

.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}
هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

[@OmarAsem26]

حل التكليف الاول
HTML
Will Go Up On Hover In Half Second
Will Go Down After half Second
-----------------------------------------------------------
CSS
.parent {
background-color: #EEE;
text-align: center;
position: absolute;
padding: 15px;
width: 300px;
height: 200px;
left: 50%;
margin-left: -150px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.parent:hover{
transition-duration: .5s;
margin-top:50px;
}
.parent:hover .child {
transition-delay: .5s;
transition-duration: 2s;
margin-top: 25px;
}
.parent .child {
background-color: #ddd;
text-align: center;
box-sizing: border-box;
padding: 15px;
width: 200px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -100px;
}

[@osamafarag4025]

جزاك الله خيرااا

[@shroukelsaman577]

بارك الله فيك

[@kareemghader4573]

ربنا يكرمك 😍😍

[@cleancode5971]

فيديو رائع جزاك الله كل خير ❤❤❤❤

[@ELDOD5486]

بقيت فرونت اند دوقتي بعد سنه؟

[@mustafamohammed7860]

روحت شوفت منيره المهديه ورجعت تانى

[@Swing840]

✨وننام بقى جمبه ونشغل منيرة المهدية 😅😂✨

[@NonaBoody]

thank u very much your explaination is very simple ^_^

[@pupaup4573]

بديت اصاب بالإحباط و اليأس 🥲

[@RichardSMikkelsen]

و الان
🤔

[@pupaup4573]

@@RichardSMikkelsen بخير الحمدلله شكرا😁

[@RichardSMikkelsen]

@@pupaup4573 العفو الله يوفقك يا اختاه

[@تحسينالبصراوي-ه3ع]

@@pupaup4573 زين والان صارلج سنه تقريبا🙂

[@Sxheyfnnfnf]

الف الف شكر يامبدع ♥

[@-hendawyonline1719]

ماشاء الله عليك

[@bigoshort]

صار عندي فضول اعرف منيرة المهدية و طلعت معتزلة بسبب ام كلثوم انت بتدرس حتى فن ليس فقط لغة برمجة
تحياتي لك .

[@zahraahmed4812]

ممكن اعمل هل شي بلا hover. اول مادخل الصفحه يصير هل الانتقال

[@AbdullahNassar-h2t]

ليه اطراف العنصر بتعمل زي shadow في اخر الtransition ?
وهل ليها حل ؟

[@gamerr555]

خمسمية في المية ❤️😂🇸🇾

[@muafaghassan3806]

بتذكر انك شرحت ال transition في 5 فديوهات في الكورس القديم بالتفصيل الممل الممل الممل 😂😂
يا جماعة شاهدو الكورس القديم و الجديد حتستفديو اوي

[@ElzeroWebSchool]

اختصرت كتير لكن الحمد لله غطيت المطلوب كله
واللي بيقع منه حاجة بيعيد الفيديو
والقديم ما قصر :D

[@slahomar1497]

@@ElzeroWebSchool بشمهندس, شكرا كتيرعلى هذا الدرس الرائع, هل يكفي مشاهده هذا الدرس, ام مشاهده الكورس القديم ايضا ؟

[@ElzeroWebSchool]

@@slahomar1497 شاهد الجديد فقط

[@ahmadalhamada4121]

وانت صارلك ٣ سنوات بالسي اس اس ياغالي

[@anascoder]

@@ElzeroWebSchool
يا بش مهندس عظمة
ضيف تلميح لو تكرمت في التاسك الأول عن كيفية التأثير على الابن لما تهوفر على الأب
أنا حليته بالاستعانة بالCahtGPT
.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}

[@JustReels7007]

من عيوني الجوز ومناخيري اللوووووز ههههههههههههههههههههههههههه

[@abdelfatahsalah6997]

جزاك الله خيرا عننا يا هندسة

[@magdyhassan2902]

Thank You.

[@azizahalammari2731]

بدون hover ماتحرك ماهي ضرورته ؟؟

[@Mohammedali-bn3gu]

فناان😍

[@yahyechriv234]

الفرق بين linear وease-in-out ماهو
linear ماشي على نفس النمط
و الثانى ماشي على نفس النمط فى البطئ

[@zemo85]

the Hover happened when I refresh the page not when I I get over the object with the curser , what's should I fix in my code

[@medali4437]

same

[@TheRanamaro]

I think because you used ":hover"
You should use "div:hover"

[@3dgamecodes]

حلوة فكرة الحركة بعد كم ثانية

[@ahmedgawbaa7638]

هل هذا العنصر يعمل مع الhover فقط؟

[@Artyon]

لا طبعا

[@بسمةايمن-ص3غ]

Thank you so much

[@moumanelihyaoui3851]

thank u teacher

[@MahmoudSaed98]

اجمل درس

[@halamary2642]

انت رهيب

[@mohsensaber4802]

دكتور سؤال احنا لو هنعمل سايت فيه 6 صفحات هل من الافل اننا نعمل لكل صفحه ملف css ولا نعملهم كلهم ف ملف واحد ولا ايه؟

[@mohamad-pc5zx]

كلهم في ملف واحد ولازم تربط ملفات html بملف css

[@ahmedmorsy1786]

خلي بالك حضرتك ذكرت اسم مغنيه ممكن اي حد يروح يبحث عنها ويسمعها بسبب حضرتك يا باشمهندس وتشيل ذنبه وتبقي سيئه جاريه
وشكرا جزيلا علي المجهود الي بتنبذله معانا وجزاك الله خيرا

[@nermeenaliabdelhakeem422]

جزاك الله خيرا

[@WhyNot-h3f]

لا حول ولا قوة إلا بالله🤗

[@e_souhil]

thanks

[@motionenergy8529]

هو انا ممكن اعمل الحاجات دى بالافتر افيكتس ؟ 😂

[@tariksalih1949]

لما يكون الـ display: none; و فى hover يكون display: block الـ transition ما يشتغل على هذه الخاصية

[@TheRanamaro]

ايوه صح وبيحصل كده مع خصائص تانيه
عشان كده الزيرو ورانا الموقع الي فيه الخصائص الي ينفع تشتغل مع transition
بس انت ممكن تعمل شبه الفكره دي باستخدام خصائص تانيه تقبل transition

[@محمدرضا-ب4ص8ث]

2:18 هههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههه

[@loprogticno]

مينفعش لما one:hpver تحصل عنصر تاني الي يتغير من الone

[@anascoder]

.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}
هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

[@forthechildren1419]

انا حاسس اني تايه في الفديو وفيه حاجات مش فاهمها

[@mohamedkhalilkhedhri9942]

😂😂😂😂 2:17

[@aser7011]

ياجماعة الخير انا جربتها في مشروع لي لكن الترانشن مو شغال مع اني حددت له كل شيي

[@منوعات_كثيره]

المشكله فيك يالطيب انا عندي شغال!

[@mokasem5097]

اول حاجة عملتها بعد الفيديو دورت على مين هي منيرة المهدية 😂😂😂

[@هاديمحمد-و8ظ]

اللهم صل وسلم على نبينا محمد وعلى آله وصحبه أجمعين

[@zeiadkhaled7718]

بالنسبة للassignment الاول ،الson بيتحرك لما hover عليه هو ولا علي الparent؟،ولو علي parent تتعمل ازاي؟

[@abdelrahmannelmnofy4388]

لقيتلها حل 🙃

[@zeiadkhaled7718]

@@abdelrahmannelmnofy4388 لا لسه

[@TheRanamaro]

ممكن يكون الزيرو عدل عالكلام والله اعلم ، لان هو كاتب الهافر علي الاب + هو موضح كده فالGIF
لما تعمل هافر الاب هيروح لفوق >> ازاي تخلي الاب يطلع لفوق ؟ يتحرك من مكانه ؟
بعد نص ثانيه من الهافر >> ازاي تخلي الابن ينزل لتحت؟ وازاي تخليه يستني نص ثانيه ؟
شوف الخاصية او الخواص الي تخليك تحرك العنصر من مكانه وانت هتعرف تحلها ان شاء الله

[@anascoder]

.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}
هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

[@MostafaAhmed-qh9ip]

❤❤❤❤❤

[@ibrahimbachiri3140]

hey there i only wanted to wonder you that you have a mistake in writing a word , in the first task of transition lessons ,تأكد أن العنصر الأبن يذهب للأسف بعد الإنتظار نصف ثانية

[@anascoder]

This is the solve for task 1, you should target the child after your target the parent:hover
.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}

[@anascoder]

.child {
width: 300px;
padding: 20px;
margin: 15px auto;
background-color: var(--fifth-color);
text-align: center;
font-size: 1.5rem;
transition: margin-top 0.5s 0.5s;
-webkit-transition: margin-top 0.5s 0.5s;
-moz-transition: margin-top 0.5s 0.5s;
-ms-transition: margin-top 0.5s 0.5s;
-o-transition: margin-top 0.5s 0.5s;
}
.parent:hover .child {
margin-top: 30px;
}
هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

[@assemshimi943]

جيش الناس الي بحثت علي منيرة المهدية 😂😂😂😂😂

[@mhmod-md]

افتر افكت 😅😅

[@YO-ib6zh]

2:22 😂😂😂😂😂😂😂😂

[@rabiekhalifa1103]

❤️💯