<div class="mainPhoto">
  <div class="photo01"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image06.jpg"></div>

  <div class="photo02"><img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image07.jpg"></div>
  <div class="text">
    <h1>MAIN TEXT</h1>
    <p>Enter the sample text here.<br>
      I hope you can make something really good.</p>
  </div>
  
  <div class="text02">
    <h2>SUB TEXT</h2>
    <p>It's okay if this is the main one.</p>
  </div>
</div>

img {
  width:100%;
}

.mainPhoto {
  width:900px;
  height: 600px;
  overflow:hidden;
  margin:0 auto;
  position:relative;
}

h1,h2 {
  font-size:200%;
}

p {
  font-size:16px;
}

.photo01 {
  animation: slideIn01 3s 1;
  width:500px;
}

.photo02 {
  animation: slideIn02 3s 1;
  width:500px;
  position: absolute;
  top: 30%;
  left: 40%;
}

.text {
  position: absolute;
  bottom: 11%;
  left: 2%;
  animation: slideIn03 3s 1;
}

.text02 {
  position: absolute;
  top: 0%;
  right: 10%;
  animation: slideIn04 3s 1;
}

@keyframes slideIn01 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn02 {
  0% {
    opacity: 0;
  }  
  10% {
    opacity: 0;
    transform: translateX(1000px);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideIn03 {
  0% {
    opacity: 0;
  }  
  20% {
    opacity: 0;
    transform: translateY(500px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn04 {
  0% {
    opacity: 0;
  }  
  30% {
    opacity: 0;
    transform: translateY(-500px);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
}