You are currently viewing Create Moving Car Animation Using HTML & CSS

Create Moving Car Animation Using HTML & CSS

Create Moving Car Animation Using HTML & Css

Create Moving Car Animation Using HTML & Css
Create Moving Car Animation Using HTML & Css

 

Welcome to Code With Random blog. In this article, we Create a Moving Car Animation. We use only HTML and CSS coding for Moving Car Animation projects.

Hope you enjoy our blog so let’s start with a basic HTML structure for the Moving Car Animation.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Moving Car Animation HTML code

<div class="car">
<div class="car__top"></div>
<div class="car__body">
<div class="car__bulb"></div>
<div class="car__bulb car__bulb--back"></div>
<div class="car__center"></div>
</div>
<div class="car__wheels">
<div class="car__wheel car__wheel--1">
<div class="wheel__circle"></div>
<div class="wheel__rect wheel__rect--1"></div>
<div class="wheel__rect wheel__rect--2"></div>
<div class="wheel__rect wheel__rect--3"></div>
<div class="wheel__rect wheel__rect--4"></div>
<div class="wheel__rect wheel__rect--5"></div>
<div class="wheel__rect wheel__rect--6"></div>
</div>
<div class="car__wheel car__wheel--2">
<div class="wheel__circle"></div>
<div class="wheel__rect wheel__rect--1"></div>
<div class="wheel__rect wheel__rect--2"></div>
<div class="wheel__rect wheel__rect--3"></div>
<div class="wheel__rect wheel__rect--4"></div>
<div class="wheel__rect wheel__rect--5"></div>
<div class="wheel__rect wheel__rect--6"></div>
</div>
</div>
</div>
<div class="cloud" style="--delay:1s;--top:10vmin"></div>
<div class="cloud" style="--delay:3s;--top:20vmin"></div>
<div class="cloud" style="--delay:7s;--top:10vmin"></div>

There is all the html code for the Moving Car Animation. Now, you can see output without css, then we write css for the Moving Car Animation.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

Moving car animation output

Moving Car Animation
Moving Car Animation
Output with html(we style all elements with Css )

Moving Car Animation Css Code

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--color-car-body:#f06043;
--color-bg-1:#e4ffff;
}
html{
height: 100%;
}
body{
background-image: linear-gradient(to top,#88d6e7 30%,#e4ffff 20%);
overflow: hidden;
}
.car{
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%,-100%);
transform-origin: 25% bottom;
animation: start-car 2.5s 1.1s;
z-index: 100;
}
.car__top{
margin-left: 10vmin;
width: 24vmin;
height: 14vmin;
transform: skew(-10deg);
border:3vmin solid #4a4c48;
border-radius: 1vmin;
border-right: 0;
}
.car__top::after{
content: '';
position: absolute;
top: -3vmin;
right: 0;
width: 10vmin;
height: 100%;
transform:translateX(120%) skew(50deg);
border:3vmin solid #4a4c48;
border-left: 0;
}
.car__top::before{
content: '';
position: absolute;
top: -.22vmin;
right: 0;
width: 16vmin;
height: 100%;
transform: translateX(70%) skew(10deg);
border:3vmin solid #4a4c48;
border-right: 0;
border-top: 0;
}
.car__body{
width: 75vmin;
height: 18vmin;
background-color: var(--color-car-body);
border-radius: 10vmin;
margin-top: -1.5vmin;
position: relative;
z-index: 10;
}
.car__bulb{
position: absolute;
top: 14%;
right: 2%;
width: 2vmin;
height: 4vmin;
border-radius: 1rem / 1.4rem;
transform: rotate(-40deg);
background-color: #fff;
}
.car__bulb--back{
top: 14%;
left: 2%;
transform: rotate(35deg);
background-color:#d14022;
}
.car__center{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
width: 10vmin;
height: 2vmin;
border-radius: 2vmin;
background-color: #fff;
}
.car__wheels{
display: flex;
justify-content: space-around;
margin-top: -9vmin;
position: relative;
z-index: 200;
}
.car__wheel{
--r:18vmin;
width: var(--r);
height:var(--r);
border-radius: 50%;
border: 1.8vmin solid #323232;
background-color: #fff;
position: relative;
animation: run .5s 1s linear infinite;
}
.wheel__circle{
--r:2.4vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:var(--r);
height:var(--r);
border-radius: 50%;
background-color: #323232;
}
.wheel__rect{
position: absolute;
width: 2.8vmin;
height: 3.1vmin;
clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
background-color: #323232;
}
.wheel__rect--1{
top: 30%;
left: 35%;
transform: translate(-50%,-50%) rotate(-40deg);
}
.wheel__rect--2{
top: 30%;
left: 64%;
transform: translate(-50%,-50%) rotate(35deg);
}
.wheel__rect--3{
top: 50%;
left: 25%;
transform: translate(-50%,-50%) rotate(-90deg);
}
.wheel__rect--4{
top: 50%;
left: 75%;
transform: translate(-50%,-50%) rotate(90deg);
}
.wheel__rect--5{
top: 70%;
left: 35%;
transform: translate(-50%,-50%) rotate(-145deg);
}
.wheel__rect--6{
top: 70%;
left: 64%;
transform: translate(-50%,-50%) rotate(146deg);
}
.cloud{
position: absolute;
top: var(--top);
left: 0;
width: 20vmin;
height: 10vmin;
border-radius: 10vmin 10vmin 0 6vmin;
background-color: #b5edf9;
-webkit-animation: cloud 10s var(--delay) linear infinite backwards;
animation: cloud 10s var(--delay) linear infinite backwards;
}
.cloud::after {
content: "";
position: absolute;
width: 20vmin;
height: 12vmin;
bottom: 0;
border-radius: 6rem 10rem 1rem 0;
-webkit-transform: translateX(9vmin);
transform: translateX(9vmin);
background-color: #b5edf9;
}
.cloud::before {
content: "";
position: absolute;
width: 15vmin;
height: 8vmin;
bottom: 8vmin;
border-radius: 20vmin 20vmin 0 0;
-webkit-transform: translateX(6vmin);
transform: translateX(6vmin);
background-color: #b5edf9;
}
@keyframes cloud {
0%{
transform: translateX(100vw);
}
100%{
transform: translateX(-100vw);
}
}
@keyframes run {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes start-car {
0%,10%,20%{
transform: translate(-50%,-100%);
}
5%{
transform: translate(-40%,-100%);
}
15%{
transform: translate(-45%,-100%);
}
25%{
transform: translate(-45%,-100%) rotate(-20deg);
}
35%,45%,50%{
transform: translate(-45%,-100%) rotate(0deg);
}
40%{
transform: translate(-45%,-100%) rotate(-10deg);
}
47%{
transform: translate(-45%,-100%) rotate(-5deg);
}
70%{
transform: translate(20%,-100%) rotate(0deg);
}
100%{
transform: translate(-50%,-100%) rotate(0deg);
}
}
Now we have completed our css section moving car animation,  here is our final updated output html and css moving car animation.

Moving Car Animation Final Output

Create Moving Car Animation Html Css
Create Moving Car Animation Html Css

 

Now we have completed our css section for Moving Car Animation.  here is our updated output with html and css for moving car animation. Hope you like the moving car animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

In this post, we learn how to create moving car animation using simple html & css. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – code with random/Anki 
Code by – md usman ansari

Leave a Reply