Flash like man walking animation using only HTML and CSS3 and no jQuery or Javascript

If you worked on flash, I think one of your early works was making a “Man Walking” animation. Today I’m gonna tell you how to make this kind of animation very easily using HTML and CSS3. We will just design a static structure and will animate it using css keyframes. So, 1st click on the “Live Demo” to view what is gonna be out output.

So now, lets discuss how to start making an animation like this. I will discuss it in two separate sections, one describing how to make the static object and another describing how to make the animation. So lets start with making the object.

How To Make The Static Object (man):

You have to make the body parts in html. Just have a look at the below html code.

<div id='containor'>
   <div class='overall'>
     <i class='head'></i>
     <div class='body'>
         <i class='middleBody'></i>
         <i class='hand1'></i>
         <i class='hand2'></i>
     </div>
     <i class='leg1'></i>
     <i class='leg2'></i>
   </div>
 </div>

Here you can see, in the div with id=’container’, I’ve make another div with class name ‘overall’. This div contains all the body parts of the body. Inside this div I’ve added different tags for head, middle body, hands and legs.

Now lets have a look at the css associated with these tags.

.head {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	margin-top: 85px;
	margin-left: 0px;
}

.middleBody {
	background: #000;
	height: 40px;
	width: 10px;
	display: block;
	position: absolute;
	margin-top: 249px;
	margin-left: -7px;
	border-radius: 100%;
	transform: scale(2.2,1.3) skewY(-30deg);
	-webkit-transform: scale(2.2,1.3) skewY(-30deg);
	-moz-transform: scale(2.2,1.3) skewY(-30deg);
}
.hand1, .hand2 {
	height: 35px;
	margin-top: 250px;
	margin-left: -5px;
	height: 50px;
	width: 5px;
	background: #000;
	display: inline-block;
}
.leg1, .leg2 {
	margin-top: 150px;
	margin-left: -5px;
	height: 50px;
	width: 5px;
	background: #000;
	display: inline-block;
}
.hand1:after, .hand2:after {
	content: '';
	width: 8px;
	height: 5px;
	border-radius: 50%;
	background: #000;
	position: absolute;
	margin-top: 47px;
	margin-left: -4px;
}
.leg2:after, .leg1:after {
	content: '';
	width: 10px;
	height: 5px;
	background: #000;
	display: inline-block;
	position: absolute;
	margin-top: 45px;
}

As you can see, making the normal head, hands and legs are very simple. You just have to give height, width and fill color to make the hands and legs. While making the head, you have to make it round using border-radius. Now you’ve to make the middle portion of the body elliptical. For that you can use the ‘transform’ property of css3. This is how you have to create the basic body but the fist and feet are yet to be made. To make them, I used the ‘after’ property, which can add some extra content after certain object. You have to give height, width and sufficient margin to make them look attached with the hands and legs. Anyways, this is how I’ve made the static object or static body of the man here which is very basic, but you can modify it and make a stylish structure.

How To Make Him Walk:

To make him walk, you have to make three different animations.

1. To move the right hand and left leg in the same sequence.

2. To move the left hand and right leg in the same sequence.

3. Move the overall body from one end to another.

First of all lets see how we can move the right hand and left leg in same sequence.

.leg1, .hand2 {
	transition: all 0.3s;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	animation: movement1 0.5s alternate infinite ease-out;
	-webkit-animation: movement1 0.5s alternate infinite ease-out;
	-moz-animation: movement1 0.5s alternate infinite ease-out;
}
@keyframes movement1
{
	0% {
		transform:rotate(-30deg);
	}
	100% {
		transform:rotate(30deg);
	}
}

The movement is done with the animation named ‘movement1’ which is made by using the keyframe concept. As you can see in 0th time span they will be move to -30 degree and at 100% time completion they will be at +30 degree position. I’ve added this to hand2 and leg1 with the animation property and made it a continuous process with the attribute ‘infinite’ and have set the time interval for 0.5 seconds.

Similarly, we can make the movement for hand1 and leg2 also. Now, this is how you have to make the movement animation for the hands and legs. But to make the walking natural, you have to move the whole body also. For that I used the following css.

.overall {
	animation: overall 9s infinite ease-in;
	-webkit-animation: overall 9s infinite ease-in;
	-moz-animation: overall 9s infinite ease-in;
}
@keyframes overall
{
	0% {margin-left:-600px;}
	100% {margin-left:550px;}
}

live-demo-button download-button

So after making all these stuffs you will find your object or the man made with css code has started walking. You can modify the object a lot keeping the functionality same and give it a real life look. So play with CSS3, it’s fun. 🙂


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Джек Бугаёв

    i have it in my browser. its like a virus. how to delete this shit???