Pure CSS3 Animated Car

Hello Coders, today I will show you something interesting with animation using CSS3 and HTML. You can use this code for making something new or your own. See below for the demo.

I hope you guys are like it. If you have any problem with this code or anything which is not understandable please comment below.

Moving.html

<!DOCTYPE html>
<html>
<head>
<title>Moving Background</title>
<link rel="stylesheet" type="text/css" href="moving.css">
</head>
<body>
<div class="bg">
<img src="car.png" class="car">
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Moving Background</title>

</head>

<body>

</div>

</body>

</html>

moving.css

body{
margin: 0;
padding: 0;
}
.bg{
position: relative;
background: #00fdff url(city.jpg);
height: 100vh;
background-size: cover;
background-position: 0 0;
background-repeat: repeat-x;
animation: animate 15s linear infinite;
}
.car{
position: absolute;
bottom: -60px;
left: 10px;
}
@keyframes animate{
from{
background-position: 0 0;
}
to{
background-position: 100% 0;
}
}

body{

margin: 0;

padding: 0;

}

.bg{

position: relative;

background: #00fdff url(city.jpg);

height: 100vh;

background-size: cover;

background-position: 0 0;

background-repeat: repeat-x;

animation: animate 15s linear infinite;

}

.car{

position: absolute;

bottom: -60px;

left: 10px;

}

@keyframes animate{

from{

background-position: 0 0;

}

to{

background-position: 100% 0;

}

Here you see the very simple code, see below for the demo.

Happy Coding..!

Was this article helpful?

YesNo

JavaScript if else Statement: Detailed Article

Bikash in How To, HTML/CSS

Aug 15, 2021 · 1 min read

How to use comments in HTML With Example

Bikash in How To, HTML/CSS

Jun 2, 2021 · 1 min read

Bootstrap Datepicker- Complete Solution to Integrate

Bikash in HTML/CSS

Nov 1, 2020 · 2 min read

24 Replies to “Pure CSS3 Animated Car”

Nice task.
But the codes I’m seeing are not all, I guess that’s not all the codes

B says:

February 25, 2019 at 10:19 am

Hey Luis, this is complete code. Please copy code and try it, if you want images i will send you on mail.
Thanks
B says:

February 25, 2019 at 11:27 am

Please check your mail for images.