I'm trying to animate a car using CSS. I've managed to animate the wheels and the car.
The car moves in and stops and then moves off. this animation loops.
Now, I need to stop the wheels as well when then car stops. But I can't seem to achieve that.
This is what I have so far:
@keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-90deg)
}
36%,
56% {
transform: rotate(-180deg)
}
100%{
transform: rotate(-359deg)
}
}
@keyframes moving {
0% {
right: -80em;
animation-timing-function: ease-out;
}
35% {
right: 0;
}
36%,
56% {
right: 0;
animation-timing-function: ease-in;
}
100% {
right: 120%;
}
}
@keyframes stableWheel {
from {transform: translateY(-.0em);}
to {transform: translateY(-.0em);}
}
.car{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 600px;
height:271px;
overflow:hidden;
animation: moving 10s linear -2s infinite;
}
.carbody{
animation: carmove 3.1s infinite linear;
background: url('https://i.stack.imgur.com/xWNOG.png') 0 0;
background-size: cover;
height: 271px;
position: relative;
width: 600px;
z-index: 125;
}
.weel{
animation: wheel 0.7s infinite linear;
background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
height: 85px;
position: absolute;
top: 67%;
width: 85px;
z-index: 200;
}
.weel1{left: 85px;}
.weel2{left: 454px;}
/*animations*/
@keyframes carmove{
0%{transform: translateY(0px);}
25%{transform: translateY(1px)}
29%{transform: translateY(2px)}
33%{transform: translateY(3px)}
47%{transform: translateY(0px)}
58%{transform: translateY(1px)}
62%{transform: translateY(2px)}
66%{transform: translateY(3px)}
75%{transform: translateY(1px)}
100%{transform: translateY(0px)}
}
body {
-webkit-animation: color-fade 10s infinite;
-moz-animation: color-fade 10s infinite;
animation: color-fade 10s infinite;
}
@-webkit-keyframes color-fade {
0% { background: #9a5342; }
25% { background: #fffc0c; }
50% { background: #e46d00; }
75% { background: #ff3506; }
100% { background: #9a5342; }
}
.stopedWeel{
animation: stableWheel .2s linear infinite alternate;
}<div class="car"><div class="carbody"></div><div class="weel weel1"></div><div class="weel weel2"></div></div>The wheels animation is this:
@keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-90deg)
}
36%,
56% {
transform: rotate(-180deg)
}
100%{
transform: rotate(-359deg)
}
}
if you run my code, the wheels are all jittery and lagging.
Could someone please advice on this?