#42 تعلم ال animation في ال css في 20 دقيقة | animation css

يمكنك مذاكرة درس ال animation و حل الاختبار من هنا من هنا |
nouvil.net/css-play-ground/cs...
-----------------------------------
للتواصل معي :
instagram |
/ abdelrahman_noufal
-----------------------------------
facebook |
/ abdelrahman.g.nofal
-----------------------------------
جروب الفيسبوك الخاص بنا |
/ 1810581845642171
-----------------------------------
ما هي animation css ؟
ال animation css ببساطة تتيح لك تحريك عناصر ال html من حالة الى اخرى و في هذا الدرس سيتم شرح التالي:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
تعد خاصية CSS Animation واحدة من الخصائص الأساسية في CSS التي تسمح للمطورين بإنشاء تأثيرات حركية على العناصر في صفحة الويب. تسمح هذه الخاصية بإنشاء تحريكات متكررة وبشكل غير محدود على العناصر في الصفحة، مما يوفر تجربة متحركة وديناميكية للمستخدم.
يعمل خاصية Animation عن طريق تحديد العنصر المراد إضافة التحريك له، ثم تحديد نوع التحريك ومدة وسرعة الحركة. يمكن تطبيق الحركات بشكل مستقل على العنصر، ويمكن تطبيق أكثر من حركة على عنصر واحد لخلق تأثيراتحركية أكثر تعقيداً. يمكن أيضاً تحديد الدورة والتكرار للحركة، مما يسمح بإنشاء حركات متكررة ومتواصلة.
يتم استخدام خاصية Animation بشكل واسع في تصميم صفحات الويب لجعل العناصر في الصفحة أكثر ديناميكية وجاذبية للمستخدم. يمكن استخدام هذه الخاصية لإنشاء تأثيرات حركية مختلفة، مثل تحريك العناصر وتغيير شكلها وظهورها واختفائها بشكل جذاب ومبتكر، مما يساعد على جعل التصميم أكثر ديناميكية وجاذبية للمستخدم.
يجب الاستفادة من خاصيةAnimation بشكل متقن وذكي لتحسين تجربة المستخدم وجعل تصميم صفحات الويب أكثر جاذبية واحترافية. على المطورين الاستخدام الجيد لهذه الخاصية وتجربة التأثيرات المختلفة لتحقيق التأثيرات المطلوبة بشكل أفضل. يجب الانتباه إلى عدم إساءة استخدام هذه الخاصية وتجنب إضافة تحريكات زائدة ومزعجة، حيث يمكن أن تؤثر سلباً على تجربة المستخدم وتقلل من جاذبية التصميم.

[@AbdelrahmanGamal]

بعد ما تخلص الدرس ده ادخل حل اختبار ال animation ده عشان تعرف انت فهمت ولا لا
nouvil.net/css-play-ground/css-animation-playground/

[@user-po2zx2zi7z]

wa alaykom salam
howa inta kont fin wallah khift 3alik yakhi thanit 2inak mit w da3it ma3ak rabi yr7mk kama ra7imtana bichar7at fi donya

[@hamid_montivation]

@@user-po2zx2zi7zkhona ni walah hhh

[@gamwesh241]

شرح جميل و واضح على الانميشن بارك الله فيك ❤
أن شاء لله اتكمل اتنزل شروحات اكثر في القناة و اتكمل كورس cs50 قريبا

[@KARAMGENADY]

هو كورس CS50 هيكتمل ولا لأ ؟

[@michaelscofield5343]

يا استاذ عبدالرحمن نريدك تكمل كورس cs50 ❤

[@user-sw6ke8dw2t]

جزاك الله كل خير😊😊
شرح رائع عن الأنميشن😅😅
أستاز نحن ننتظر كورس cs50 بفارغ الصبر😢😢
وجزاك الله خيرا 😊😊
شكرا يا أستاذ عبد الرحمن جمال من القلب❤❤❤❤❤❤

[@kawthermahdi-mp5qn]

ارجوا منك اكمال سلسله تعلم cs50
وبارك الله فيك على الجهد المبذول
وان شاء الله في ميزان اعمالك 🌺🌺🌺

[@Sbhanallah_1]

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

[@user-qu3zd3fh1c]

حقيقي

[@mohammedothman8457]

استاذ عبدالرحمن ممكن تكمل كورس cs50 انت افضل واحد يشرحو❤️💙 اذا مش هتكمل ممكن تخبرنا

[@raymondreddington4100]

افضل حلقة في كل الكورس 💝😅 احس بدا الجد و الجمال تبع css

[@MohamedIbrahim-cw5eh]

هلا بالعودة يا عبد الرحمن اتمنى تكمل كورس ال cs50 لانك كنت شغل جامد اوى

[@mohamedknor7824]

اية ي جدع انت غايب بقالك كتير جدا ❤.
كورس cs50 من احلي الكورسات ف القناة يالا ي وحش كمل الكورس

[@yousifshm25]

بارك الله فيك أفضل قناة لشرح برمجة المواقع 😍💙

[@ahmedfahmy4036]

الله يكرمك عالشرح الجميل دا بجد❤❤❤❤❤❤

[@ihabgasim1784]

تسلم ايدك يا هندسة
دايما شرحك ابدااااع ♥️♥️❤️

[@hagarabdelhamid9985]

ما شاء الله بجد طريقتك توحفة ❤

[@hussienahmd9776]

حمدا لله على سلامتك يا هندسه .. جزاك الله كل خير .

[@mohammedkhalifa1973]

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

[@AdamAdam-gz8wc]

الله يبارك لك شرح محترم والله وواضح ومنظم

[@ST_K7]

عيدك مبارك يا عبدالرحمان وكل عام وانت بخير، ونفع بك الاسلام والمسلمين، وبارك في عمرك. آمين.

[@sayedsaid5538]

جزاك الله كل خيرا ي احلي عبد الرحمن ❤

[@SJYSJY5891]

ربنا يجعله بميزان حسناتك يارب

[@diobrando5334]

شرح كافي و وافي جزاك الله خير

[@momenayman7215]

اشكرك انك بعد ما كانت حياتي باهته ومليش هدف احققه طريقه شرحك حببتني في المجال وبشكرك علي محتواك المجاني وان شاء الله متغبش عننا تاني

[@Recover-Fitness-Hub]

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

[@al-batll2023]

تحياتي لك اخي على الموضوع الرائع.. صح رمضانك

[@Nicola_Tesla452]

استاذ ممكن تتطبق مشاريع بلغة PHP و SQL و html و css JavaScript 🥰🌼😘
وكل عام وانت بخير ❤️🥰🌹

[@user-nm4yv7ze8b]

انا كمان عايز كورس php و myeql

[@haythamahmed420]

الله يباركلك يا بشمهندس 🤩

[@mazenalfar5953]

دائما مبدع أستاذنا الفاضل

[@hebaamin3318]

بارك الله افضل حد يشرح برمجة كمل بالله عليك ربنا يكرمك محتاجين شرح bigquery من فضلك

[@Ahmed-lasloom]

مبدع الله يوفقك

[@ilyaskabbani6512]

شكرا جزيلا أستاذ جمال

[@hello-so1tj]

ماشاء الله عليك شرح جميل وتستاهل

[@ninamay3340]

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

[@user-jq9uy1iq3v]

شرح جميل و واضح على الانميشن بارك الله فيك

[@ZZZ0728]

بارك الله فيك

[@user-hd6bn9tg4f]

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

[@m.p313]

بارك الله فيك مبدع اخوك من العراق اتمنالك التوفيق❤ رمضان كريم ❤

[@sayedsaid5538]

ايه ي هندسه مش هتكملنا اسابيع كورس cs50

[@markod7280]

يعطيك العافية طولت علينا بالغيبة ومين طول الغيبات جاب الغنايم🎉🎉
رمضان كريم

[@user-qu3zd3fh1c]

من اكتر الناس اللي بفهم منها

[@lhoussaintv9642]

الله يعطيك الصحة

[@kiro665]

الله يجازيك يا استاد

[@AhmedMohammed-lx8vq]

حمد الله على السلامة ❤

[@Code252]

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

[@kora2day752]

اتعلمت رياكت منين؟

[@chakabani123taftouf7]

very excellent, continue...

[@youssefjeo2790]

انت فييييييييييين يا عم بقالك 4 شهور مش باين خالصحمد الله على السلامة يا غالي وكل سنة وانت طيب

[@Ahmad_4s]

حبيبي يامحمد تسلم

[@user-vi6di3xi2r]

كل سنه وانت طيب يا استاذ عبد الرحمن💖

[@user-bp5jw4cy1g]

يااااه يا عبدالصمد مرحب برجوعك والله

[@asallaeliwa644]

عظمة ❤❤

[@3AYEZ]

يمعلم انا بزعل لما تتاخر علينا بس رجعتك بتفرح

[@anasanas7842]

إفتقدناك والله

[@FaridRoushdy]

انا بشكر حضرتك على شرحك الممتاز ..انا متابع حضرتك في كل فيديوهاتك ... واتمنى انك تعمل كورس react

[@user-sk1id1wc8r]

استمر 👍 ياوحش

[@mramzi7]

عودة حميدة إن شاء الله دروس جد ممتعة وشرح سهل وممتاز جعل الله ما علمته في ميزان حسناتك وبارك الله في علمك واتمنى أن لا تطول غيبتك عنا. اريد ان اسألك إذا كانت هناك دروس مبرمجة مستقبلا في css flex و react js وشكرا جزيلا

[@jyyounesse6190]

انا ايضا داعم لهذا الاقتراح واتمنى مستقبلا ان شاء الله البشمهندس عبد الرحمان جمال مقدر لينا شرح عن الadvance css

[@themask4443]

شكرا

[@Rajelbrahim]

thanks for the beautiful explination and hope you are doing well in your life focus on your childrens and good bye

[@khaledwg5138]

طالت الغيبه بس فديو عظمه ❤❤❤

[@user-ig8ep8pu5g]

افتقدتك اوي لاني مبفهمش غير منك ياريت متغبش تاني و تنزل كورس css جديد عشان محتاجينه

[@AbdelrahmanGamal]

بسجل حاليا كورس css جديد و هينزل خلال ايام

[@user-ig8ep8pu5g]

@@AbdelrahmanGamal ياريت والله

[@fadikhaleel2092]

شرح رائع

[@ahmedmousa698]

شكرا ❤

[@almsry3686]

في اخبار عن cs50 ياهندسه

[@ayoubberhili5694]

شرح جيد

[@zainab.9]

عاشت ايدك

[@YoussefMohamed-vf6tb]

Thank you

[@hamed_18_3]

جاااامد

[@luayabdelbaqi7566]

الله يعطيك العافية. 🤗طولت غيبتك بشو مشغول

[@Nourddinebenbark]

tanks friend

[@ABUKHALED2]

رمضان كريم يجدع متنسش CS50

[@Once-crypto]

شكرا لد 🎉🎉🎉❤❤. هل يمكنك شرح after before

[@learnecode]

حدمدالله علي السلامه

[@playprofessionallywithhani256]

يعطيك العافي شرح جميل . سؤال فينا بالcss نعمل عند الوصول section معين يعمل التأثير مثل بالجافا onscroll

[@abdogharib4488]

ينقع تنزل سلسلة c# استمر 💪💪

[@user-pe4lk9vk5r]

بارك الله في علمك

[@momanebinabda7672]

مرحبا بعودتك استاذ

[@scin307]

حضرتك وقفت فيديوهات كورس CS50 لسه فيه تقريبا تلت أسابيع لسه ما نزلوش

[@amonuiswardy-3005]

وكورس CS50 هيكمل ولا

[@wesamwesam7887]

سلام عليكم أنا متابعك وشرحك يجنن ياريت تعمل مشروع بالجافا سكربت يكون شامل غير القديم وشكرا❤

[@rajabarca7411]

Thank u so much for All !!!

[@djdkxkkhddjjd7365]

ممكن حضرتك تشرح مكتبه pyqt5 في بايثون

[@BlueDragonCoding]

شرح جميل ممكن نعملنا كورس php و تزودلنا مشاريع الفرون اند😅

[@yehia7041]

يا ريت تعمل كورس css علشان الكورس القديم ناقص كتير

[@akasm287]

من بعد اذنك كورس cs50 خلصتو ولا هتكمل فيه 🥺🥺

[@user-qb6id8rk4i]

ممكن شرح اضافه المنتجات ل عربه المشتريات بعد اذنك ي هندسه

[@MohamedAhmed-hp3wc]

يا ريت تجمع الملخصات الي زي كدا في playlist واحدة

[@yamen_727]

سؤال هل اتعلم c++ في الوقت الحالي مع تطور الذكاء الاصطناعي وقدرة على البرمجة؟

[@blacktech6525]

إشتقنالك كثير والله❤️❤️

[@AbdelrahmanGamal]

حبيبي و انا اكتر والله

[@user-du3ij4rm6t]

اجمل مبرمج في الدنيا ❤

[@AbdelrahmanGamal]

حبيبي يا عبدالله ❤️

[@Belabaoui]

ممكن تشرح node js

[@yousifabdelrady3288]

رمضان كريم

[@AbdelrahmanGamal]

❤️❤️❤️❤️

[@mohmedshiha9447]

مش هتكمل كورس cs50

[@esslemferchichi9220]

ارجوك اعمللنا فيديو علی الذكاء الاصطناعي

[@moky772]

هو في تكملة للكورس cs50 قريب ؟

[@omarbarbeir9887]

بعد اذنك اذا ممكن كورس لل React.js

[@zainab.9]

ممكن تشرحلنا ع gitbash

[@user-cm4xd9wm1g]

انا لسه هبدأ ادرس برمجه مواقع الويب اى افضل حاجه ابدأ بيها ابدأ ب HTML and Css ولا ابدأ ب Cs50 ارجو الرد ضرورى

[@mohamedmostafa1912]

رجاءا cs50
please

[@user-uo4yv9ml6m]

ممكن تعمل كورس type script في اقرب وقت ؟

[@Abdullah-wj2of]

كورس cs50 من فضلك هيكمل ولا كدا خلاص مش هتكمل اعتقد فاضل ٤ اسابيع لسه مخلصوش انا بعد ما بدأت فى الكورس وخلصت اسبوع صفر وواحد اتفاجئت انه مش كامل

[@Mohamed-rb7cl]

لو سمحت انا بذاكر بايثون ومش فاهم الفرق بين return, print
ومفهمتش هل return بتحفظ القيمة بتاعت الدالة جواها بينما print بتطبعها؟