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

Image
Have you ever admired a beautifully designed website and wondered how you can create something similar? If yes, then becoming a web designer might be the perfect career for you. Web design is a blend of creativity and technical skills, where you can bring ideas to life and make an impact on the digital world. In this blog, we will guide you step by step on how to become a web designer, even if you're starting from scratch. 1. Understand What Web Design Is Before jumping into web design, it’s important to understand what it actually means. Web design is about creating the layout, look, and feel of a website. It involves working on the visual aspects like colors, typography, and images, as well as ensuring the website is user-friendly and responsive on all devices. A good web designer focuses on creating websites that are not only attractive but also functional and easy to use. 2. Learn the Basics of Web Design To start your journey, you need to learn some basic concepts and s...
Read More

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

Image
Why Tools Like DeepSeek Are Allies—Not Enemies—for Coders The rise of AI coding tools like DeepSeek, GitHub Copilot, and ChatGPT has sparked panic in developer communities. Headlines scream, “AI will replace programmers!” But as a JavaScript developer who’s tested these tools extensively, I’m here to say: AI won’t steal your job—but developers who use AI will outperform those who don’t. Let’s break down why, with real code examples and hard truths. 1. What AI Can Do Today (Spoiler: It’s Impressive… and Flawed) a. Boilerplate Code Generation Ask DeepSeek to “create a React todo list with local storage,” and it’ll spit out functional code in seconds. Here’s a snippet it generated for me: import React, { useState } from 'react'; function TodoApp() { const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || []); // ... rest of the component } The catch: It used localStorage directly in the component, ignoring best practices like cus...
Read More

Easy Light Bulb Project: HTML, CSS, and JavaScript

Image
In this tutorial, we will learn how to create a light bulb using HTML, CSS, and JavaScript. We will go step by step, explaining the code and its functionality. By the end of this tutorial, you will have a working light bulb that can be toggled on and off with a button. HTML Markup <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Light</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <div class="light"></div>         <div class="cap"></div>     </div>     <button id="power">OFF</button>     <script src="script.js"></sc...
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

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

Image
In this tutorial, we'll create an enhanced To-Do list app using HTML, CSS, and JavaScript, incorporating local storage to save our tasks. This project is perfect for beginners looking to improve their web development skills. What You Will Learn Creating a basic To-Do list interface Adding, editing, and deleting tasks Saving tasks to local storage Styling the application with CSS Your Folder Structure Your project folder should look like this: enhanced-todo-app/ ├── index.html ├── style.css ├── script.js └── images/ ├── delete.svg └── editbutton.svg GitHub Repository For the complete source code, you can check out the GitHub repository: Enhanced To-Do List App Source Code . Step 1: HTML Structure We'll start with the basic HTML structure for our To-Do list app. Create an HTML file named index.html and add the following code: ...
Read More

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

Image
Ever scrolled through a blog and thought, "Wait… do people actually make money doing this?" If so, you’re not alone. Blogging started as a way for people to share their thoughts online, but today, it’s a full-fledged business model. In fact, many bloggers earn six figures (or more!) just by writing about topics they love. Sounds interesting, right? Let’s dive into what the blogging business is all about and how you can turn it into a money-making machine. What is a Blogging Business? A blogging business is simply a blog that’s monetized. Instead of writing just for fun, bloggers strategically create content that attracts readers and generates income. Think of it as running a media company—but instead of newspapers or TV channels, your blog is the main platform. And the best part? You don’t need a degree, a fancy office, or a huge team to get started. All you need is a website, valuable content, and a plan to grow and monetize your audience. How Do Blogs Make Money? ...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

Which is Better: Bootstrap or Tailwind?

Image
If you’ve ever built a website, chances are you’ve stumbled across two big names in the CSS world: Bootstrap and Tailwind CSS . Both are powerful tools, but which one is the right fit for your project? Let’s break it down without getting too technical! What is Bootstrap? Bootstrap is like that friend who always comes prepared. It’s a CSS framework loaded with pre-styled components like buttons, navbars, modals—you name it. It’s perfect for quickly putting together a website that looks polished and professional right out of the box. Why People Love Bootstrap: Ease of Use: Copy-paste components, tweak them a bit, and you’re good to go! Responsive Design: Mobile-first designs are baked in. Time-Saving: You don’t have to start from scratch. However, Bootstrap has its quirks. Sometimes, it feels like everyone’s website looks… the same. And customizing things beyond the basics can get tricky. What is Tailwind CSS? Now, Tailwind is a different story. Think of it as a ...
Read More

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

Image
Alright, let’s address the elephant in the room. Every few years, someone declares web development “dead” because AI built a website in 30 seconds or a no-code tool let your cousin launch a DIY e-commerce store. Cue the panic. But here’s the thing: web development isn’t dying—it’s just shedding its training wheels . Let me explain why. Why the Drama? Blame These Two Things AI Hype : Yeah, ChatGPT can write code snippets. But ask it to debug your spaghetti React code at 2 a.m., and suddenly it’s ghosting you. Template Overload : Platforms like Squarespace are great for basic sites, but try customizing one beyond their rigid layouts. Spoiler: You’ll end up Googling “how to hire a developer.” Why 2025 Is a Golden Era for Web Devs “Good Enough” Isn’t Good Enough Anymore Imagine a bakery using a generic template. Cute, right? Now imagine that bakery scaling to nationwide delivery with real-time inventory, custom loyalty programs, and a UX t...
Read More

How To Live Without A Smartphone?

Image
   Nowadays, most people can live without water for a long time. But, cannot live without a smartphone for even a second. If you are also one of them and wanted to live without a smartphone then you must follow the givens tips: Don't Use Your Smartphone It is that simple, don't use your smartphone. If you keep using a smartphone you will aim to use it more cause smartphone is too addictive. So, don't use it. Avoid Distraction If you don't want to use a smartphone you should avoid all those distractions like Facebook notifications, Whatsapp Messages, YouTube Notifications, etc. You should turn off the notification of your smartphone or keep your smartphone on silent mode. Set Time Table To Use Smartphone You can also set time table and limit your smartphone uses. You can set your timetable like: I will use my smartphone for only 2 hours from 5 PM to 7 PM, I will use my smartphone for 30 minutes in the leisure time, etc. This is one of the effective ways to get rid of sma...
Read More