Walking Man Animation Using CSS

Walking Man Animation Using CSS

In this tutorial we will see how to create Walking Man Animation Using CSS. This animation is created using transform, animation and position properties of CSS.

Table of Contents

HTML Code

Basic HTML Code template is given below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Walking Man Animation Using CSS</title>
</head>
<body>
</body>
</html>

Images of Road and Building

Adding images of road and building.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Walking Man Animation Using CSS</title>
</head>
<body>
    <img src="road.jpg" class="road1">
    <img src="road.jpg" class="road2">
    <img src="buildings.png" class="buildings1">
    <img src="buildings.png" class="buildings2">
</body>
</html>

Creating Man using HTML

Writing HTML Code to create our main character (Man).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Walking Man Animation Using CSS</title>
</head>
<body>
    <img src="road.jpg" class="road1">
    <img src="road.jpg" class="road2">
    <img src="buildings.png" class="buildings1">
    <img src="buildings.png" class="buildings2">
    <div class='main'>
    <span class="face"></span>
    <span class="neck"></span>
    <span class="chest">
    <span class="arm1"></span>
    <span class="arm2"></span>
    <span class="leg1">
    <span class="shoe1"></span>
    </span>
    <span class="leg2">
    <span class="shoe2"></span>
    </span>
    </span>
    </div>
</body>
</html>

CSS Code

CSS Code is given below.

Body CSS

body {
margin: 0;
padding: 0;
background-color: #bbb;
overflow: hidden;
}

Road CSS

.road1 {
position: absolute;
top: 70%;
left: -5139px;
animation: road1 20s infinite linear;
}
.road2 {
position: absolute;
top: 70%;
left: 0px;
animation: road2 20s infinite linear;
}

Buildings CSS

.buildings1 {
position: absolute;
background-color: #bbb;
top: -8%;
left: -100%;
width: 100%;
height: 500px;
animation: building1 20s infinite linear;
}
.buildings2 {
position: absolute;
background-color: #bbb;
top: -8%;
left: 0px;
width: 100%;
height: 500px;
animation: building2 20s infinite linear;
}

Main Div CSS

.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

CSS of Man

Writing CSS of our main character (Man).

Face CSS

.face {
height: 60px;
width: 30;
display: block;
border-radius: 50%;
background-color: yellow;
text-align: center;
}

Neck CSS

.neck {
height: 15px;
width: 10px;
display: block;
background-color: yellow;
text-align: center;
margin: auto;
}

Chest CSS

.chest {
height: 100px;
width: 50px;
display: block;
background-color:#6d8de3;
text-align: center;
margin: auto;
position: relative;
border-radius: 20px;
 }

Arm 1 CSS

.arm1 {
position: absolute;
top: 5px;
left: 20px;
height: 120px;
width: 10px;
background-color:yellow;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg1 2s linear infinite;
z-index: -1;
border-radius: 10px;
 }

Arm 2 CSS

.arm2 {
position: absolute;
top: 5px;
left: 20px;
height: 120px;
width: 10px;
background-color:yellow;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg2 2s linear infinite;
border-radius: 10px;
}

Leg 1 CSS

.leg1 {
position: absolute;
top: 90px;
left: 20px;
height: 130px;
width: 10px;
background-color:#001e70;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg1 2s linear infinite;
z-index: -1;
}

Leg 2 CSS

.leg2 {
position: absolute;
top: 90px;
left: 20px;
height: 130px;
width: 10px;
background-color:#001e70;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg2 2s linear infinite;
z-index: -1;
}

Shoe 1 CSS

.shoe1 {
position: absolute;
top: 120px;
left: -24px;
height: 15px;
width: 35px;
background-color: #001e70;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg1 2s linear infinite;
z-index: -1;
border-radius: 8px 0px;
}

Shoe 2 CSS

.shoe2 {
position: absolute;
top: 120px;
left: -24px;
height: 15px;
width: 35px;
background-color:#001e70;
text-align: center;
margin: auto;
transform-origin: top;
animation: leg1 2s linear infinite;
z-index: -1;
border-radius: 8px 0px;
}

Animating Road

Animating road using css animation property and keyframes rule.

@keyframes road1
{
    from
    {
        left: -5139px;
    }
    to
    {
        left: 0px;
    }
}
@keyframes road2
{
    from
    {
        left: 0px;
    }
    to
    {
        left: 5139px;
    }
}

Animating Building

Animating building using css animation property and keyframes rule.

@keyframes building1
{
    from
    {
        left: -100%;
    }
    to
    {
        left: 0px;
    }
}
@keyframes building2
{
    from
    {
        left: 0px;
    }
    to
    {
        left: 100%;
    }
}

Animating Legs of Man

Animating the legs of man using css animation property and keyframes rule. The arms will move automatically with respect to the position of the legs.

@keyframes leg1 {
	0% {
    transform: rotate(0deg);
    }
	25% {
    transform: rotate(-15deg);
    }
	50% {
    transform: rotate(0deg);
	}
	75% {
    transform: rotate(15deg);
    }
	100% {
    transform: rotate(0deg);
    }
}
@keyframes leg2 {
    0% {
    transform: rotate(0deg);
    }
	25% {
    transform: rotate(15deg);
    }
    50% {
    transform: rotate(0deg);
    }
	75% {
    transform: rotate(-15deg);
    }
	100% {
    transform: rotate(0deg);
    }
}

Video Tutorial

Watch video tutorial on how to create Walking Man Animation Using CSS.

Tags