HTML & CSS

Moving Car Animation using CSS and JavaScript

Rohan750
Rohan750
3 Min Read

This is fun tutorial, we will see how you can animate a car with simple CSS and move it. We use plain HTML and CSS to animate our car. We animate roads, buildings and car wheels.We will learn how to drive a car with CSS and add more functionality using JavaScript like car sound.We are going to create this tutorial to understand how animation works.

Contents
HTML Code </html> css file Javascript code

You see online:

https://caranimatedusingcssandjs.netlify.app/

HTML Code

Moving Car Animation using  CSS and javascript :First we create our HTML file and then we add all the images using the HTML image tag. We have pictures of the wheels and car body.
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="style.css">  
   <script src="script.js"></script>  
   <link rel="icon" href="https://img.icons8.com/color/48/000000/lamborghini.png" type="image/x-icon">  
   <title>Car Animation</title>  
 </head>  
 <body>  
   <div class="container">  
     <div class="sky">  
       <div class="trees"></div>  
       <div class="track"></div>  
       <div class="car">  
         <div class="wheel wheel1">  
           <img src="car_wheel_left.png" alt="">  
         </div>  
         <div class="wheel wheel2">  
           <img src="car_wheel_right.png" alt="">  
         </div>  
       </div>  
     </div>  
   </div>  
 </body>  


 </html>

css file 

*{
    margin:0 ;
    padding: 0;
}
body{
    overflow: hidden;
    animation: shakebody linear 6s infinite;
    background-image: url(background.jpg);
}
.sky{
    height: 100vh;
    width: 100%;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    position: absolute;
}
.trees{
    height: 100vh;
    width: 100%;
    background-image: url(trees.png);
    background-size: cover; 
    position: absolute;
    top: -144px; 
}
.track{
    height:60vh;
    width:800vw;
    background-image: url(track.png);
    position:absolute;
    top:70vh;
    background-repeat: repeat-x; 
    animation: carMove linear 13s infinite;
}
.car{
    height: 100px;
    width: 380px;
    background-image: url(car_body.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 444px;
    bottom:30vh;
    animation: shake linear .3s infinite;
}
.wheel1 img{
    width: 77px;
    position: relative;
    top:42px;
    left:42px;
    animation: wheelRotation linear .16s infinite;
}


.wheel2 img{
    width: 77px;
    position: relative;
    top: -39px;
    left: 235px;
    animation: wheelRotation linear .16s infinite;

}
@keyframes wheelRotation
{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes carMove
{
    100%{
        transform: translateX(-500vw);
    }
}
@keyframes shake
{
    0%{
        transform: translateY(-5px);
    }
    50%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(-5px);
    }
}
@keyframes shakebody
{
    0%{
        transform: translateY(-50px);
    }
    50%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(-50px);
    }
}
@media only screen and (max-width: 768px) {
    .car{
        height: 50px;
        width: 190px;
        left: 180px;
        position: absolute;
    }
    .wheel1 img{
        width: 38.5px;
        position: relative;
        top:22px;
        left:22px;
    }.wheel2 img{
        width: 39px;
        position: relative;
        top: -21px;
        left: 115px;
    }
}

Javascript code

In javascript code we can add car sound 


var audio = document.createElement('audio');
audio.setAttribute('src', 'sound.mp3'); 
audio.loop=true;
audio.play();


Full source code:

https://github.com/patelrohan750/caranimated.github.io

Share this Article
Previous Article 10 tips for learning python fast! master in python
Next Article Hangman in Python
22 Comments
- Advertisement -
Lost your password?