Moving Car Animation using simple CSS

Moving Car Animation using simple CSS

In this simple but interesting tutorial we will see how you can animate a car using simple CSS and make it move. We will use simple HTML and CSS to animate our Car. We will animate the road, buildings and the wheels of the Car.

Table of Contents

Demo

Check Demo

HTML Code

Moving Car Animation using simple CSS: First we will make our HTML file and then we will add all the images using HTML Image Tag. We have Images of Road, Buildings, Sky, Wheels and the body of the car. The simple code to add all the images is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Moving Car Animation using CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="sky.jpg" class="sky">
<img src="road.jpg" class="road1">
<img src="road.jpg" class="road2">
<img src="buildings.png" class="buildings1">
<img src="buildings.png" class="buildings2">
<img src="car.png" class="car">
<img src="wheel.png" class="wheel1">
<img src="wheel.png" class="wheel2">
</body>
</html>

Then we will do the styling of these images, our main goal is to position all our main items as shown in main image.

For that we have used position property of CSS and set it's value to absolute. We have set the top and left properties of the objects in a way that they are arranged together as shown in main image.

Body CSS

First of all I have set padding and margin of body of our document to zero pixels and removed the scroll bar from browser by setting value of overflow property to hidden.

body
{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

Road CSS

Then i have done styling of both images of Road to position it at it's place using road1 and road2 class.

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

Building CSS

Then I have done styling of building images to set them in the background using building1 and building2 class.

.buildings1
{
    position: absolute;
    top: -10%;
    left: -100%;
    width: 100%;
    animation: building1 10s infinite linear reverse;
}
.buildings2
{
    position: absolute;
    top: -10%;
    left: 0px;
    width: 100%;
    animation: building2 10s infinite linear reverse;
}

Car CSS

Then I did some styling to the position the body of car in the middle of the road using car class.

.car
{
    position: absolute;
    top: 40%;
    width: 50%;
    left: 25%;   
}

Wheel CSS

Then I placed both wheels to there position, again using position property. Wheel1 and Wheel2 classes are used.

.wheel1
{
    position: absolute;
    top: 64%;
    left: 31.5%;
    width: 8%;
    animation: wheel 3s infinite linear;
}
.wheel2
{
    position: absolute;
    top: 64%;
    left: 61.5%;
    width: 8%;
    animation: wheel 3s infinite linear;
}

Animating the Road, Buildings, and Wheels

Road Animation: I have used keyframes and road1 and road 2 class to change the position of both road images, the whole process of animation will take 10 seconds.

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

Building Animation: I have used keyframes and building1 and building2 class to change the position of both building images, the whole process of animation will take 10 seconds as well.

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

Wheel Animation: I have used keyframes and wheel class to rotate both wheel images, the whole rotation will take 3 seconds. Both wheels will rotate in same direction.

@keyframes wheel
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}

Also Read Tennis Ball Bounce Animation using CSS, Walking Man Animation Using CSS

Video Tutorial

Tags