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.
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{ <strong>/*this is the image which is animated below*/</strong> background: url("Cartoon.png") no-repeat; width: 185px; height: 290px; <strong>/*code below shows the speed of the steps*/</strong> animation: walk 1.2s steps(8) infinite, forward 5s linear infinite; } <strong>/*Code below use for walking animation*/</strong> @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 and
If you want anything please comment below
Happy Coding..!
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.