Character walking animation Using CSS3 and HTML

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.

Table of Content

0.1 Please comment below for a thumbs up.
0.2 Go below for a live view

1 CharacterWalking.html
2 characterwalkinganimation.css
- 2.1 If you want anything please comment below

Please comment below for a thumbs up.

Go below for a live view

So let’s start our code, start with HTML,

CharacterWalking.html


<!DOCTYPE html>
<html>
<head>
<title>Character Walking</title>
<link type="text/css" href="characterwalkinganimation.css">
</head>
<body>
<div class="runner"></div>
<div class="road"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Character Walking</title>

</head>

<body>

</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


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);
}
}

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

[sociallocker]Click here for image.[/sociallocker]

Happy Coding..!

Bikash

My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.

3 thoughts to “Character walking animation Using CSS3 and HTML”

Rabab says:

July 13, 2019 at 1:30 am

I need this character image

1. Bikash says:
  
  July 12, 2019 at 8:14 pm
  
  Please provide your correct mail ID for images.
  
2. Bikash says:
  
  July 12, 2019 at 8:33 pm
  
  Now we provide the download link on same post.
  You can check
  Thanks for supporting.