Creating a Car Animation with HTML and CSS

 

In this blog post, we will create a simple car animation using HTML and CSS. This tutorial will guide you through the process and provide you with the source code.

Source Code

Below is the HTML and CSS code used for the car animation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="car"><img src="car.png" alt="">
    <div class="head-light"></div></div>
    <div class="building"></div>
    <div class="road"></div>
</body>
</html>
/* style.css */
*{
    box-sizing:border-box;
    margin: 0;
    padding:0;
}
body{
    height: 100vh;
    background-color: skyblue;
    overflow:hidden;
    animation: sky 20s infinite linear;
}
@keyframes sky {
    0%{
        background-color: skyblue;
    }
     25%{
        background-color: rgb(7,7,17);
     }
     50%{
        background-color: rgb(7,7,17);
     }
}

.car img{
    width: 150px;
    position: absolute;
    bottom: 20vh;
    right: 40vh;
    animation: car 1s infinite linear;
}
@keyframes car {
    0%{
        transform: translate(2px,5px);
    }
    100%{
        transform: translate(1px, 6px);
    }
    
}
.road{
    width: 100%;
    height: 20vh;
    background-color: black;
    position: absolute;
    bottom:0;
}
.building{
    background: url(building.png);
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: -10vh;
    z-index: -5;
    animation: building 10s infinite linear;

}
@keyframes building {
    0%{
        transform: translate(-100vw);
    }
    
    100%{
        transform: translate(100vw);
    }
}
.head-light{
    width: 200px;
    height: 20px;
    background-color: yellow;
    opacity: 0.8;
    position: absolute;
    bottom: 19vh;
    right: 60vh;
    transform: rotate(-15deg);
    z-index: -1;
    animation: light 20s infinite ease-in-out;
}
@keyframes light{
    0%{
        opacity: 0;
    }
    25%{
        opacity: 0.8;
    }
    50%{
        opacity: 0.8;
    }
    90%{
        opacity: 0.8;
    }
    100%{
        opacity: 0;
    }
}

Image Reference

Ensure that you have an image named car.png in the same directory as your HTML file. This image will be used for the car in the animation. Here is an example image:



View on GitHub

You can view and download the complete source code from our GitHub repository:

View on GitHub




Trending Posts

How to Become a Web Designer: A Complete Guide

Will DeepSeek AI Replace Web Developers? A JavaScript Developer’s Reality Check

Easy Light Bulb Project: HTML, CSS, and JavaScript

The Secret to Flawless Web Design: Mastering Responsive Layouts

Building an Enhanced To-Do List App Using HTML, CSS, and JavaScript with Local Storage

What is Blogging Business? A Beginner’s Guide to Making Money Online

8 Characteristics Of Modern Computer

Which is Better: Bootstrap or Tailwind?

Is Web Development Dying in 2025? Let’s Get Real

How To Live Without A Smartphone?