Simple Car Drive Animation CSS || HTML, CSS || Free Source Code

Hello friends, in this article you will learn to create an simple CSS car drive animation [car animation] with just vanilla CSS without any library or frameworks. This is the written version of the video uploaded on the YouTube channel of ramCoder. Creating this animation is not of a hard work, anyone with basic knowledge of CSS and keyframes in CSS can easily understand this code.  I have uploaded the source code file in the GitHub repository with the download link at the end of this article. Also, I have embedded the code in the code box in this article also.

I have used the CSS keyframes in order to create this effect of car drive [car animation] in this tutorial. This kind of animations doesn't need any of other dependencies'. It can just be achieved with vanilla CSS.


In order to create this simple animation [car animation for driving] in CSS you will need to follow the following simple steps and you are ready to go.

Step 1:

First of all, you will need to create an index.html file and paste the following code into the file and save the changes to take effect.

<!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 Running Animation - ramCoder</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      <img src="./car-img.png" alt="" />
    </div>
  </body>
</html>{codeBox}

Step 2:

After finishing up with the index.html file, you will need to create an style.css file and add the following CSS code in the file and save the changes to take the effect.

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
div {
  background-image: url(./car-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0%;
}
img {
  width: 250px;
  height: auto;
  position: relative;
  top: 80vh;
  left: -600px;
  animation: carAnimation 5s infinite ease;
}
@keyframes carAnimation {
  from {
    left: -600px;
  }
  to {
    left: 110vw;
  }
}{codeBox}


Note: You will need the images I used to be saved into your file folder. Without the images, your code will not work. You can download images as well as code file from the GitHub repository. {alertInfo}

So, this is how you can create an simple CSS animation for car driving [car moving animation] in the road.

{getButton} $text={Download Source Code} $icon={download}

Post a Comment

Previous Post Next Post