Pure Css Car Animation | Moving Car Animation Css







Pure Css Car Animation |  Moving Car Animation Css 

WelcomeπŸŽ‰ to Code With Random blog. In this blog, we learn how to create Pure Css Car Animation. We use HTML & CSS  for Pure Css Car Animation. Hope you enjoy our blog so let’s start with a basic HTML structure for the Pure Css 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 HTML code for the Pure Css Car Animation. Now, you can see output without CSS, then we write CSS for the Pure Css Car Animation.

Output

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

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,  Here is our final updated output CSS.

Final Output

Pure Css Car Animation |  Moving Car Animation Css


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Pure Css Car Animation, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you πŸ™πŸ’•

In this post, we learn how to create Pure Css 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

Check out more…..

Share on:

Leave a Comment