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 type="text/css" href="moving.css">
</head>
<body>
<div class="bg">
<img src="car.png" class="car">
</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;
}
}

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

Happy Coding..!

Was this article helpful?
YesNo
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH, my native place in Odisha. I am a Web Programmer by profession and working on more than 50 projects to date. My passion is working on the web-based project using PHP and relate to all CMS and frameworks which is based on PHP.
Posts created 163

24 thoughts on “Pure CSS3 Animated Car

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
mariobet - supertotobet - escort -

takip7.com

We are now accepting Guest Posting and creation of Backlinks
This is default text for notification bar