How to make a walking man animation using html CSS

February 28, 2022June 5, 2022 M-SoftTech 0 Comments

hello viewer, in this article I will teach you how to create a walking man animation using html and CSS only without use of JavaScript. so, let’s start this article. I have used two images in this project one image is background image and another one image is character step image.

How to Make CSS car animation using html CSS

What is CSS Keyframes?

In this walking men animation effect I am using CSS keyframes. As you know that what is CSS keyframes. If you don’t what is CSS keyframes so don’t worry I will tell you what is CSS keyframes and why we are using CSS keyframes. Basically CSS keyframes are introduced in css3 They are mainly used for animation effect. You can move a element. easily one direction to another direction using CSS keyframes. In other words you can also say if you want to any types of animation effect on your web page. you will use CSS keyframes and you are doing easily do all things.

Floating Panel Animation Using HTML and CSS Only | Floating Panel Animation

Here is HTML Code

<main>
	<div class="guy"></div>
	<div class="road">
		<div class="depth"></div>
	</div>
</main>

then you make a CSS file and copy the below code and paste in your CSS file. you make sure your CSS file link in html document. when your CSS file is not link on html document the page output is blank. now you can copy the below code.

Here is CSS code

*{margin: 0; padding: 0;}
body{background: url(../image/back.jpg); background-size: 100% 700px; overflow: hidden;}
main{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 193vw;
	height: 100vh;
	margin-left: -527px;
}
.road{
	width: 375vh;
	height: 361px;
	transform-style: preserve-3d;
	transform: perspective(500px) rotateX(50deg);
	box-shadow: 0 0 30px 0 inset rgb(73 0 56), 1px 40px 5px 5px rgb(34 0 33);
	background: #16041594;
	margin-bottom: -596px;
}

@keyframes animate-road{
	from{background-position: 120px;}
	to{background-position: 0px;}
}
.road::after{
	content: "";
	display: flex;
	position: absolute;
	top: calc((100% - 16px) / 2);
	left: 3%;
	width: 99%;
	height: 11px;
	background-image: linear-gradient(to right, #41092d 0%, #7f1e39 70%,
		#3330 70%, #3330 100%);
	background-size: 60px 100%;
	animation:animate-road linear 4s infinite;
}

.depth{
	width: 100%;
	height: 20px;
	position: absolute;
	left: 50%;
	bottom: -19px;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, #346ca5 90%, transparent);
}
.guy{
	width: 80px;
	background: url(../image/1.png);
	height: 125px;
	animation:walk 1s steps(8) infinite, forward 25s linear infinite;
	z-index: 9999999;
	margin-bottom: -460px;
}
@keyframes walk{
	0%{background-position: 0px;}
	100%{background-position: 3000px;}
}
@keyframes forward{
	0%{transform: translateX(100px);}
	100%{transform: translateX(1900px);}
}

if you don’t find the images then you comment me on my YouTube channel, I will provide you all images

Watch a video tutorial how to make a walking man animation using html and CSS only