CSS Animation for image on each other and then separate - html

Question

I want to create an animation in HTML, CSS where 3 images will be on each other. At that time there is a text says car and then all images will be separate and each image has text bottom of them saying body, tyres, engine. Any resource or how to do this type of animation?
I hope this will explain what I'm looking for.
.container {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 0;
left: 45%;
height: 200px;
width: 200px;
}
.image-1 {
position: absolute;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
animation: moveltf 1s ease-in-out;
}
.image-2 {
position: absolute;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
.image-3 {
position: absolute;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
animation: movertf 1s ease-in-out;
}
.image-1 {
animation-direction: normal;
animation-delay: 2s;
}
.image-3 {
animation-direction: reverse;
animation-delay: 2s;
}
#keyframes moveltf {
0% {
top: 0;
left: 0;
}
100% {
left: 100%;
}
}
#keyframes movertf {
0% {
top: 0;
left: 0;
}
100% {
right: 100%;
}
}
<div class="container">
<div class="image-1">
<img src="https://via.placeholder.com/50">
<p class="text">Image 1 </p>
</div>
<div class="image-2">
<img src="https://via.placeholder.com/50/ffff00">
<p class="text">Image 2</p>
</div>
<div class="image-3">
<img src="https://via.placeholder.com/50/ff00ff">
<p class="text">Image 3</p>
</div>
</div>