Hello Coders, hope you all are doing well and today we see something new and very funny type thing which you guys like it very much, I hope.
Please comment below for a thumbs up.
In This Article
Go below for a live view
So let’s start our code, start with HTML,
CharacterWalking.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Character Walking</title> <link rel="stylesheet" type="text/css" href="characterwalkinganimation.css"> </head> <body> <div class="runner"></div> <div class="road"></div> </body> </html> |
The main part of this task is the CSS code. For animate the character, we have to write CSS which I gave below,
characterwalkinganimation.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
body{ background: orange; } .road{ border-bottom: 7px dashed black; } .runner{ /*this is the image which is animated below*/ background: url("Cartoon.png") no-repeat; width: 185px; height: 290px; /*code below shows the speed of the steps*/ animation: walk 1.2s steps(8) infinite, forward 5s linear infinite; } /*Code below use for walking animation*/ @keyframes walk{ 0%{ background-position: 0px; } 100%{ background-position: -1472px; } } @keyframes forward{ 0%{ transform: translateX(-100px); } 100%{ transform: translateX(1200px); } } |
Above is the complete code of the character walking animation, you can try and also make your own.
If you want anything please comment below
Live View
See the Pen Character walking animation Using CSS3 and HTML by Bikash Panda (@phpcodertech) on CodePen.
Happy Coding..!
Was this article helpful?
YesNo
I need this character image
Please provide your correct mail ID for images.
Now we provide the download link on same post.
You can check
Thanks for supporting.