How to make Moving Car CSS Animation

 

Hello friends, welcome to our blogspot TECH WITH ANURAG  and  in this blog we are going to learn How to make Moving Car CSS Animation in this blog post.

What is CSS Animation?

An Animation allows a component steadily to change from one style to another style. 

You can change as numerous CSS properties you need, as many times you need. 

To utilize CSS activity, you should initially indicate some keyframes for the movement. 

Keyframes hold what styles the component will have at specific time.

in this program(How to make Moving Car CSS Animation) on the webpage car(png file of car) is running with amazing background and sliding animation.

If any case you hard to understand what i try to explain. Please check our full content video tutorial on this program(How to make Moving Car CSS Animation).

Video Tutorial of  Moving Car CSS Animation

I hope you like this program and video tutorial😊

If you like this program(How to make Moving Car CSS Animation) and the video tutorial of this program and now you want to get source code of this program. Don't worry you easily get the source code of this program. 

To get the source code you simply need to look down.

You might like this:

• Animated Share Button Using Only HTML & CSS
• Image Overlay Hover Effects Using HTML and CSS
• Amazing Mail Button SVG Animation | HTML & CSS |
• Mobile Menu Design Using HTML & CSS (no Javascript)

Moving Car CSS Animation[source code]

Before the sharing the codes of this program(Creative Age Calculator).Let's talk about some important tags and codes of this program. First, you need to create two files one HTML File and another one is CSS File and link the CSS file to HTML file. first, in the HTML File i created a <div> with the class name container and inside this <div> i created

another two <div> with the class name car(this div is created for car png file) and another with the class name road.

In CSS file first (if you not using boostrap) reset the all default padding and margin to 0. in CSS file first i gives 100% hight of body and add background image and animation in body then i gives 100% width of container with fixed position then i styling road and car and by using @keyframes control the steps in CSS animation.

HTML FILE:

<div class="container"> <div class="car"> <img src="car.png"> </div> <div class="road"></div> </div>

CSS FILE:

*{margin: 0; padding: 0;} body{ height: 100vh; } body{ background-image: url("nature.png"); animation: clouds 30s linear infinite; } .container{ position: fixed; bottom: 0; width: 100%; } .road{ border-top: 25px solid #333; height: 100px; background-image: url("landscape.png"); background-size: 200px auto; animation: road 2s linear infinite; } .car{ margin: 10% auto -75px; position: relative; width: 250px; animation: car 15s linear infinite; } .car img{ width: 100%; animation: suspension 1s infinite; } @keyframes road{ from{background-position: 0 0;} to{background-position: -200% 0;} } @keyframes car{ 50%{transform: translateX(-20%);} 70%{transform: translateX(30%);} 100%{transform: translateX(0%);} } @keyframes suspension{ 0%{transform: translateY(-29px);} 50%{transform: translateY(-25px);} 100%{transform: translateY(-29px);} } @keyframes clouds { from{background-position: 0 0;} to{background-position: 200% 0;} }