How to Make Moving Car Animation Using HTML and CSS.

Here in this HTML and CSS tutorial I will show how you can create webpage with animation effect, here I will add one car that looks like moving on the road and car wheels will be rotating with the help animation using CSS.

First thing you need to do is to then create index.html file and style.css file. Then inside an index file write HTML code and inside a style.css file add CSS code below.

Inside index file write the code

<!DOCTYPE html>
<html>
<head>
	<title>Moving Car</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container1">
		<div class="city-road"></div>
		<div class="street"></div>
		<div class="car">
			<img src="img/car.png">
		</div>
		<div class="car-wheel">
			<img src="img/wheel.png" class="back-wheel">
			<img src="img/wheel.png" class="front-wheel">
		</div>
	</div>

</body>
</html>

In CSS file.

body{
	
}
.container1{
	height:600px;
	width:100%;
	background-image:url(img/sky.jpg);
	background-size:cover;
    position:relative;
	overflow-x:hidden;
}
.city-road{
	height:200px;
	width:500%;
	background-image:url(img/road.jpg);
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background-repeat:repeat-x;
	z-index:1;
	animation: city-road 1s linear infinite;
}
@keyframes city-road{
	100%{
		transform:translateX(-3400px);
	}
}
.street{
	height:250px;
	width:500%;
	background-image:url(img/city1.jpg);
	position:absolute;
	bottom:200px;
	left:0;
	right:0;
	display:block;
	z-index:1;
	background-repeat:repeat-x;
	animation: street 5s linear infinite;
}
@keyframes street{
	100%{
		transform:translateX(-1400px);
	}
}
.car{
	width:400px;
	left:50%;
	bottom:100px;
	transform:translateX(-50%);
	position:absolute;
	z-index:2;
}
.car img{
	width:100%;
	animation: car 1s linear infinite;
}
@keyframes car{
	100%{
		transform:translateY(-1px);
	}
	50%{
		transform:translateY(1px);
	}
	0%{
		transform:translateY(-1px);
	}
}
.car-wheel{
	left:50%;
	bottom:178px;
	transform:translateX(-50%);
	position:absolute;
	z-index:2;
}
.car-wheel img{
	width:72px;
	height:72px;
	animation:car-wheel 1s linear infinite;
}
.back-wheel{
	left:-165px;
	position:absolute;
}
.front-wheel{
	left:80px;
	position:absolute;
}
@keyframes car-wheel{
	100%{
		transform:rotate(360deg);
	}
}

Download images (wheel, car,road and city) from a link https://drive.google.com/file/d/1VM9-uYd51WArM3JpRgQZ9nuYYnna4FA7/view,