درس animation تحريك الصور

[هيلبرنت]

السلام عليكم ورحمه الله وبركاته​

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

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

الان ننتقل الى عمل ال css الخاص بنا

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

شرح ال css
قمنا بتعريف id اسمه man وقمنا استدعاء الصورة

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

قمنا بوضع طول وعرض للصورة
الصورة مألفة من 8 اجزاء وطول الصورة التي استخدمها هي 2252px نقوم بتقسيمها على 8 فيظهر لنا رقم 281px وهذا لظهور جزء واحد فقط من الصورة

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

الان عرفنا animation وجعلنا سرعته 1.0ثانية يمكن ان تغيرها عند الزيادة تصبح ابطأ وعند التقليل تصبح اسرع
steps هو عدد الاجزاء المكونة منها الصورة
infinite ممكن تغيرها لرقم وهنا لجعلها تتحرك دائما

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

الان نقوم بتعريف keyframe
ونحدد له البداية من 0 والنهاية في عرض الصورة كاملة وهنا استخدمت ( - ) لان اريد ان يمشي من اليسار الى اليمين

🔒 يجب تسجيل الدخول لمشاهدة محتوى الكود.

هذه استخدمت من اجل ان يعمل الكود على google chrom