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

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

نبدأ اولا بعمل وسم div بهذا الشكل
رمز Code:




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

رمز PHP:

#man{
background: url(WalkingManSpriteSheet.png);
width: 281px;height: 346px;
-webkit-animation: walk-east 1.0s steps(8) infinite;
animation: walk-east 1.0s steps(8) infinite;
}
@-webkit-keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}

شرح ال css
قمنا بتعريف id اسمه man وقمنا استدعاء الصورة
رمز Code:
background: url(WalkingManSpriteSheet.png);
رمز Code:
width: 281px;height: 346px;
قمنا بوضع طول وعرض للصورة
الصورة مألفة من 8 اجزاء وطول الصورة التي استخدمها هي 2252px نقوم بتقسيمها على 8 فيظهر لنا رقم 281px وهذا لظهور جزء واحد فقط من الصورة

رمز Code:
animation: walk-east 1.0s steps(8) infinite;
الان عرفنا animation وجعلنا سرعته 1.0ثانية يمكن ان تغيرها عند الزيادة تصبح ابطأ وعند التقليل تصبح اسرع
steps هو عدد الاجزاء المكونة منها الصورة
infinite ممكن تغيرها لرقم وهنا لجعلها تتحرك دائما

رمز Code:
@keyframes walk-east{
from{background-position: 0px;}
to{background-position: -2252px;}
}
الان نقوم بتعريف keyframe
ونحدد له البداية من 0 والنهاية في عرض الصورة كاملة وهنا استخدمت ( - ) لان اريد ان يمشي من اليسار الى اليمين

رمز Code:
-webkit-animation
@-webkit-keyframes
هذه استخدمت من اجل ان يعمل الكود على google chrom

الصورة والكود موجود في المرفقات

الملفات المرفقة lib.zip (58.9 كيلوبايت)

المصدر...