In this video, i will teach you animation – a Cartoon character will running on straight Road via HTML and CSS
===Man Character running on Road via HTML and Css | HTML and CSS Animation | Easy to learn HTML CSS===
we used sprite image for character
=== Use below Style.css ====
#man{
background:url(“man.png”);
Width:142px;
height:140px;
position: relative;
top: -450px;
left: 0;
animation:walk 1s steps(5) infinite, forward 5s linear infinite;
}
@keyframes walk {
0%{
Background-position : 0px;
}
100%{
Background-position : 3000px;
}
}
@keyframes forward {
0%{
Transform: translateX(-100px);
}
100%{
Transform: translateX(1280px);
}
}
SHARE this video with YOUR FRIENDS, Relative and Everyone and SUBSCRIBE to for more awesome tutorials!
Join our Youtube Channel
https://www.youtube.com/channel/UCCalqTYU_w_5ngpeVEMSvxQ
Join our Facebook group to see more latest activities
https://www.facebook.com/groups/how.to.tips.and.tricks
Follow us on Twitter
Tweets by howtotipstricks
Follow us on Instagram
https://www.instagram.com/how_to_tips_and_tricks2018/
Please like our Facebook page
https://www.facebook.com/How-To-Tips-and-Tricks-203015640638928
Please like our Other Youtube Channel
https://www.youtube.com/channel/UCSEoUn0L0Q_UEd6aBCP375A
source