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

8 Characteristics Of Modern Computer

Why iPhones Don't Have Memory Card Slots?

The Secret to Flawless Web Design: Mastering Responsive Layouts

Creating Mjölnir Thor Hammer Using HTML and CSS

Is Data Analyst a Good Career? Pros, Cons & Salary Insights

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

Create a Stunning Personal Portfolio Website with HTML & CSS

Difference Between Java and JavaScript: A Complete Guide

4 Website To Use If You Use The Internet

Is TypeScript Frontend or Backend?