Moving Car CSS Animation

moving car

In this tutorial, we going to understand moving car using CSS. We will understand how to drive a car using just a CSS and add more functionality using javascript(like, start a car on entering, turn off lights). We are going to create this tutorial for the beginner to understand how the animation work. You can use this animation build website and attract the user.

So let’s get started and understand how to create moving car animation using CSS

Now the first thing to create this animation is to create an empty folder in vs code editor( you favorite editor). create two files Index.html and style.css. I will include both these files in the root folder. 

Index.html file looks like this.

In this file, we have been linked style.css file using link tag. You can download the images from this link. 

In the body tag, we have divs that have background images. In the car div class, we will add the car image and specify some style using style.css file. You can see we did not add any advance markup in the file. So everything we create is using style.css file.

So let’s see what inside the style.css file.

In this file,  we nothing going to add anything special. We just add a background image to the surface and to the night class. One’s we have background and surface we can move the surface to dive the car. Instead of moving the car forward we will move the surface backward. So it seems like we are driving a car.

To create animation we used @keyframes. The move right @keyframe used to move the surface to the left side. We make this keyframe infinite so its seems like the car is moving. Then we create suspension @keyframe to create a mimic of suspension effect of the car. We add these animations in the class and added these classes to the element using javascript.

But before we add javascript, make sure you created a file magic.js in the root directory.

So let’s create magic.js file in the root directory and link this file to index.html. Copy this script tag and paste it before the closing body tag.

You can notice, we also added jquery CDN. So keep the link as it is.

Now let’s see how the magic.js file looks like.

In the document.ready() function we will put all the jquery code. In this function, we will create a few variables to select HTML elements. We select different variables like surface, car, and image.

You can see we have keypress event to listen to the keypress enter. when we press enter we are going to execute the handler function. In this function, we will add and remove moveRight and suspension class. The toggleClass() Method help users to do that. Using this method we will add and remove classes simultaneously. To identify the enter key we will use 13 keycode. If you want to know the keycode use e.which to get the keycode.

Now the next thing is we will use keypress on 13 keycode. So when we press “W” I want to turn off and turn on lights. So on “W” keypress, we will toggle the images in the array. We have an array of two images. We will use these images to toggle when we press the “W” key.

So this is all we are going to create in this tutorial. Now just open the index.html file in the browser.

Now when you press enter key the car moves forward. To stop the car use enter key again. To turn off and turn on lights of the car use “W” key.

So that’s it. If you have any question ask me any time in the comment.

That is all, for now, I will see you in the next article.