Car animation from left to right and then hide car image - html

Question

I need to make an animation of a moving car from left to right and then hide the picture and another one of the same, but from right to left.
Can someone help me with this?
This is my code for now:
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: calc(100% - 100px);
}
100% {
left: 0;
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">

Answer 1

Place the image in a div that has overflow.
Animate over transform: rotateY and left.
I used a div with a car emoticon, instead of an image.
.car-movement {
overflow: hidden;
font-size: 40px;
height: 50px;
}
.car-movement > .car {
position: relative;
display: inline-block;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
transform: rotateY(180deg);
left: -100px;
}
50% {
transform: rotateY(180deg);
left: 100%;
}
51% {
transform: rotateY(0deg);
left: calc(100% + 100px);
}
100% {
transform: rotateY(0deg);
left: -100px;
}
<div class="car-movement">
<div class="car">🚕</div>
</div>

Answer 2

If I understood correctly, you want that car would ride from left to right and hide on the right side of the window?
Then you should edit this code part:
0% {
left: -100px;
}
50% {
left: calc(100% - 100px);
}
Instead of 100px write car image length.
Also before all code, you should write this for the body:
body {
overflow-x: hidden;
}

Answer 3

.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
left: calc(100% - 100px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
left: 0;
-webkit-transform: rotateY(0deg);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">

Answer 4

If you give your keyframes a couple of intermediate steps you can not only get the car going from left to right and back again but you can get it to turn round before doing the right to left bit.
Obviously you need to put in your car svg image to get the full effect.
.car-movement {
position: absolute;
top: 65%;
left: 0;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
left: 0;
transform: translate(-100%);
}
50% {
left: 100%;
transform: translate(0);
}
50.5% {
transform: rotateY(180deg) translate(0);
}
99.5% {
left: 0;
transform: rotateY(180deg) translate(0);
}
100% {
transform: rotateY(0deg) translate(0);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">