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

[@hashafai1934]

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

[@mohammedhassona99]

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

[@s.7ps]

ههههههههه

[@Sxheyfnnfnf]

ME TO hhhhhhh

[@Nebrass_]

ههههه

[@afnanalabi9102]

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

[@unlimited_varieties]

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

[@sondos1606]

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

[@alialazawi2849]

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

[@branme3506]

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

[@moabuelhamd5175]

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

[@Aziz-kw6ct]

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

[@CoffeineCode15]

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

[@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. يعني سريعة في النص

[@VeNus-el4cf]

Lesson 42 done alhamdulilah❤

[@salmamousaad]

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

[@athraahassan-z1z]

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

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

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

[@alaaali1824]

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

[@wissam_zidan]

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

[@elaraishimohamed5703]

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

[@malekalganadi1712]

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

[@Amr_Salama]

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

[@NaelAbuanza]

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

[@zezeseshill3032]

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

[@ibrahimnassar2129]

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

[@nouraaldossry8039]

😂😂😂😂 متت

[@afnanalabi9102]

😹 ايه و الله

[@zafershoaybi]

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

[@yaseenhasan8345]

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

[@AhmedMahmoudMMD]

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

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

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

[@rodwangd2683]

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

[@heshamelsharkawy1216]

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

[@mohamed.mowafy]

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

[@mohamednasr1671]

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

[@kareemayman.2yk648]

I love you man so much

[@yousefsoof2984]

The King of CSS

[@AHMEDELDEEB-x6t]

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

[@Artyon]

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

[@rafatkhtab2436]

فنان انت

[@ameenfiras]

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

[@mohammadreziq4797]

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

[@ahmadbenchakhtir]

شكرا 🤍.

[@mahmoudshendy7476]

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

[@kareemghader4573]

ربنا يكرمك 😍😍

[@son11236]

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

[@moathahmed2360]

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

[@osamafarag4025]

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

[@shroukelsaman577]

بارك الله فيك

[@ryanawaji7666]

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

[@houdasidahmed1626]

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

[@kareemayman.2yk648]

keep going

[@Sostrong2000]

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

[@Sxheyfnnfnf]

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

[@-hendawyonline1719]

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

[@cleancode5971]

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

[@ELDOD5486]

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

[@ismaelelshamy]

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

[@Swing840]

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

[@NonaBoody]

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

[@abdelfatahsalah6997]

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

[@Mohammedali-bn3gu]

فناان😍

[@magdyhassan2902]

Thank You.

[@TarekYahia-w2c]

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

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

استاذ اسامة لو تكرمت كيف ممكن عمل 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; }

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

Thank you so much

[@mustafamohammed7860]

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

[@nermeenaliabdelhakeem422]

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

[@moumanelihyaoui3851]

thank u teacher

[@MahmoudSaed98]

اجمل درس

[@JustReels7007]

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

[@pupaup4573]

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

[@RichardSMikkelsen]

و الان 🤔

[@pupaup4573]

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

[@RichardSMikkelsen]

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

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

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

[@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"

[@azizahalammari2731]

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

[@AbdullahNassar-h2t]

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

[@zahraahmed4812]

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

[@halamary2642]

انت رهيب

[@ahmedgawbaa7638]

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

[@Artyon]

لا طبعا

[@3dgamecodes]

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

[@bigoshort]

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

[@gamerr555]

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

[@e_souhil]

thanks

[@mohsensaber4802]

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

[@mohamad-pc5zx]

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

[@yahyechriv234]

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

[@ismaelahmed-su3ep]

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

[@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; }

[@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; } هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

[@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; } هذا حل مشكلة ربط حركة الابن بالهوفر على الأب في التكليف الأول:

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

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

[@assemshimi943]

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

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

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

[@tariksalih1949]

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

[@TheRanamaro]

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

[@mohamedkhalilkhedhri9942]

😂😂😂😂 2:17

[@ahmedmorsy1786]

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

[@YO-ib6zh]

2:22 😂😂😂😂😂😂😂😂

[@WhyNot-h3f]

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

[@MostafaAhmed-qh9ip]

❤❤❤❤❤

[@aser7011]

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

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

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

[@forthechildren1419]

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

[@rabiekhalifa1103]

❤️💯

[@motionenergy8529]

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

[@MohamedSalah-ln2vs]

دا لحب دح دح

[@mokasem5097]

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

[@mohamedjamal153]

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

[@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; }