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 Create a Digital Clock with Date using HTML, CSS & JavaScript

Image
In this tutorial, you’ll learn how to create a beautiful and responsive Digital Clock using HTML, CSS, and JavaScript . This project is perfect for beginners looking to practice DOM manipulation and real-time functionality in JavaScript. 🎬 Watch the Tutorial 🔗 GitHub Source Code You can find the complete source code on my GitHub repo here: 👉 View on GitHub 🧱 Step 1: HTML Structure Here’s the base HTML layout for the clock: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Digital Clock</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="clock">         <div class="time">       ...
Read More

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
Read More

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!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>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">      ...
Read More

How To Create A Parallelogram Using HTML and CSS?

Image
STEP 1: Add <div class="parallelogram"></div> into your HTML document inside <body> section. STEP 2: Add this CSS code. .parallelogram{   width: 250px;   height: 150px;   background-color: black;   transform: skew(-30deg);  } Output The width: 250px and height: 150px give width and height to the object. The background-color: black; make the object's background color black to make it visible. Then, the transform: skew(-30deg); property skew the object in X-axis by -30degree. And the parallelogram is created using HTML and CSS.
Read More

Why Should You Create Programming Notebooks?

Image
Many people say writing, creating, and preparing notebooks is old fashion. We are digital now, we can store our text, document, and other files digitally, creating notebooks digitally as well. But, is there any use or pros to creating notebooks, especially for programmers/hackers whose whole career depends on digital mediums. What are the Advantages of Creating Programming Notebooks? There are several advantages of creating programming notebooks. They are: Record of your Programming Learning Journey You can keep a record of your programming learning journey. You can analyze how long did it take to learn this programming language, how long it took you to learn this part of programming,  etc. You Can Review What You Have Learned So Far in Programming You will have written notebook proof of what you have learned so far. You can check and review it and analyze what you have learned and what you have missed learning in programming. You Can Sell Your Notebooks to New Beginner Programmers...
Read More

How To Create A Semi-circle Using Only HTML and CSS?

Image
STEP 1: Add a <div class="semi-circle"></div> in the body section of an HTML document. STEP 2: Go To your CSS file and add this code.  .semi-circle{  width: 150px;   height: 75px;   background-color: black;   border-radius: 100px 100px 0 0; } Output The width: 150px; and height: 75px; gives width and height and create a rectangle. Then, background-color: black; gives color to the background so that we can see the actual rectangle created. And the last one, border-radius: 100px 100px 0 0; , it create a rounded border on the top-left and top-right corner of  the rectangle. The two zeros in ( border-radius: 100px 100px 0 0 ; ) is for the border-radius for bottom-right and bottom-left and we kept it width 0 to make it look like a semi-circle.
Read More

How To Create A Trapezium Using HTML and CSS?

Image
STEP 1: Add <div class="trapezium"></div> in your HTML document in the <body> section. STEP 2: Add this CSS code. .trapezium{ border-width: 100px; border-style: solid; border-color: transparent transparent black transparent; width: 200px;  }   Output The border-width: 100px; property gives width to the border, border-s tyle: solid; makes the border surface area solid, and border-color: transparent transparent black transparent; make the top, left, right side border transparent and keep the bottom border black which creates a triangle. Then, the width: 200px; property extends it to make a trapezium or trapezoid.
Read More

10 AI Coding Tools That Actually Made Me a Worse Programmer (2025 Edition)

Image
You know how everyone’s been raving about AI coding tools lately? Like, “Oh my God, Copilot wrote my entire app!” or “This tool saved me hours of work!” Yeah, I was one of those people. I jumped on the bandwagon hard, like full-speed, no seatbelt, straight into a wall kind of hard. And don’t get me wrong, AI coding tools can be incredibly helpful. But somewhere along the way, I realized something unsettling: they weren’t always making me better. In fact, some of them were slowly turning me into a lazy, confused, over-dependent mess of a developer. This is my honest take no, sugarcoating on 10 AI coding tools that, despite the hype, actually made me a worse programmer. Not because they’re bad tools (they’re not), but because of how they subtly warped my coding habits, critical thinking, and even my confidence. Buckle up, this is gonna get a little personal. 1. GitHub Copilot – The Genius That Made Me Dumb Let's start with the king of them all: GitHub Copilot. I’ll admit it, t...
Read More

The Secret to Flawless Web Design: Mastering Responsive Layouts

Image
Ever visited a website that looked great on your laptop but was a total mess on your phone? Maybe the text was too small, the images were all over the place, or buttons were impossible to click. Annoying, right? Well, that’s exactly why responsive web design is a game-changer. If you’re a web developer (or aspiring to be one), mastering responsive layouts is the secret sauce to making websites look flawless on all devices —whether it’s a massive desktop monitor, a tablet, or a tiny smartphone screen. What is a Responsive Layout? A responsive layout is a web design approach where your website automatically adjusts to fit any screen size. Instead of designing separate sites for desktop and mobile, responsive design ensures one website works everywhere. Why Does It Matter? Better User Experience (UX): No one likes zooming in and out just to read content. SEO Boost: Google ranks mobile-friendly websites higher. More C...
Read More