Css Animation for image on each other and then seprate

February 3, 2023

Hi all 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 seprate and each image has text bottom of them saying body, tyres, engine any resource or how to do this type of animation

>Solution :

This type of animation can be created using CSS and HTML. You can create a container for each image and use absolute positioning to stack the images on top of each other. Then, you can use CSS keyframes to animate the images moving apart from each other and reveal the text at the bottom. Here’s an example:

.container {
  position: relative;
}

.image-1,
.image-2,
.image-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: move 1s ease-in-out;
  animation-fill-mode: forwards;
}

.image-1 {
  animation-delay: 0.2s;
}

.image-2 {
  animation-delay: 0.4s;
}

.image-3 {
  animation-delay: 0.6s;
}

.car-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  animation: move-text 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 25%;
    left: 50%;
  }
}

@keyframes move-text {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="container">
  <div class="image-1">
    <img src="image-1.png">
    <p class="text">Body</p>
  </div>
  <div class="image-2">
    <img src="image-2.png">
    <p class="text">Tyres</p>
  </div>
  <div class="image-3">
    <img src="image-3.png">
    <p class="text">Engine</p>
  </div>
  <p class="car-text">Car</p>
</div>