CSS Animations
هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations! إنها التقنية التي تضيف الشكل الجمالي والحيوية إلى المواقع وتجعل التفاعل معها أكثر انسيابية وراحة…
دورة تتضمن
- 7 أقسام
- 46 المواضيع
- 15 الإختبارات
- شهادة دورة
- 7أقسام
- 46درسًا
- 15اختبارًا
- شهادةإتمام
المحاضرمحمد أبوسريع
هل سبق لك أن ضغطت على زر أو فتحت نافذة على موقع ما، ولاحظت حركة سلسة تجعل التجربة أكثر حيوية؟ هذا ما توفره CSS Animations! إنها التقنية التي تضيف الشكل الجمالي والحيوية إلى المواقع وتجعل التفاعل معها أكثر انسيابية وراحة للمستخدمين.
ما هي CSS Animations ولماذا هي مهمة؟
CSS Animations هي تقنية تتيح لك إضافة حركات وانتقالات (Transitions) بصرية للمواقع بطريقة سلسة وطبيعية. هذه الحركات البسيطة تلعب دورًا كبيرًا في تحسين تجربة المستخدم، حيث تجعل التفاعلات أكثر وضوحًا وتوفر شعورًا طبيعيًا أثناء التنقل بين الصفحات والعناصر، وهذا ما تفعله شركة مثل Apple، حيث تعتمد على الحركات لجعل تجربة المستخدم على موقعها مبهرة.من خلال هذه الدورة، ستتعلم كيف يمكنك استخدام هذه التقنية لرفع مستوى تصميمات موقعك وتقديم تجارب مستخدم استثنائية مثل مواقع الشركات الرائدة في العالم.
محتوى الدورة
- 1المقدمة
- 2مواد الدورة
- 3تجهيز بيئة العمل
- 4خاصية Transform14 درسًا · 6 اختبارات
- مقدمة
- الإزاحة translate
- مختصر كتابي: Translate
- اختبار قصير: Translate
- التحجيم scale
- مختصر كتابي: Scale
- اختبار قصير: Scale
- التدوير rotate
- مختصر كتابي: Rotate
- اختبار قصير: Rotate
- الإمالة skew
- مختصر كتابي: Skew
- اختبار قسم Skew
- نقطة الأصل transform-origin
- مختصر كتابي: Transform origin
- اختبار قصير: Transform origin
- الجمع بين عدة عمليات تحويل
- مختصر كتابي: Combining multiple operations
- التحدي 1
- اختبار Transform
- 5الانتقالات Transitions21 درسًا · 3 اختبارات
- مقدمة
- مختصر كتابي: Introduction
- اختبار قصير: Introduction
- دوال التوقيت
- مختصر كتابي: Timing functions
- دالة التوقيت linear
- مختصر كتابي: Linear
- دالة التوقيت ease-out
- مختصر كتابي: Ease-out
- دالة التوقيت ease-in
- مختصر كتابي: Ease-in
- دالة التوقيت ease-in-out
- مختصر كتابي: Ease-in-out
- دالة التوقيت ease
- مختصر كتابي: Ease
- دالة التوقيت steps
- مختصر كتابي: Steps
- المنحنيات المخصصة
- مختصر كتابي: Custom curves
- التأخير
- مختصر كتابي: Delays
- اختبار قصير: Delays
- التحدي 2
- اختبار قسم Transitions
- 6الإطارات المفتاحية Keyframes11 درسًا · 5 اختبارات
- مقدمة
- الحركات المتدرجة
- مختصر كتابي: Step animations
- اختبار قصير: Step animations
- خاصية animation بالتفصيل
- مختصر كتابي: Animation property in depth
- اختبار قصير: Animation property in depth
- الحركات متعددة المراحل
- مختصر كتابي: Multi-step animations
- اختبار قصير: Multi-step animations
- التحويلات ثلاثية الأبعاد
- مختصر كتابي: 3D transform
- اختبار قصير: 3D transform
- كلمة أخيرة: استخدم الحركات بحذر
- التحدي 3
- اختبار قسم Keyframe
- 7الخاتمة
- الاختبار النهائي
- الاختبار النهائي للدورة
عن المعلم
التقييمات والمراجعات
محمد ابوعيسى
الرسوم المتحركه لمسه جذابه للمواقع.
لوجينا
الدورة مفيده لكن نتكني ان تضعوا solution للbonus بتوع challenges
طالب وجد هذا التقييم مفيد
Omar Gomaa
في الحركة بركة الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً.
Elsayed Bondok
الشرح جيد جداً - المعلومات بالنسبة لي مفيدة وجديدة - التدريبات شيقة ومبدعة. جزاكم الله جميعاً خيراً كثيراً. https://sbondok.github.io/css-htm-course/
Mohamed Nasser Abdalla
شرح الدورة واضح وممتع، ويُبرز أهمية التحريك في تحسين تجربة المستخدم. المحتوى منظم ويحفّز على التطبيق العملي بأسلوب احترافي.
Mahmoud Abayazeed omer
perfect
Mohamed Tamer
10/10
Ibrahim Salah
استفدت جدا منها
Ali Fadel
التحديات كانت جميلة جدا للتطبيق على المعلومات.
طالب وجد هذا التقييم مفيد
تقرير
عضو الحظر؟
من فضلك أكد أنك تريد منع هذا العضو.
لن تتمكن بعد هذه الخطوة من:
- ذكر هذا العضو في منشورات
- قم بدعوة هذا العضو إلى المجموعات
- مراسلة هذا العضو
يرجى الانتظار بضع دقائق حتى تكتمل هذه العملية.
تغطية شبه شاملة للمعلومات ومفيد ومنهج مرتب