<div class="fadein-animation">
    <div class="fade-in size">
      <p>その場でフェードイン</p>
      <img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" width="200" height="200">
    </div>

    <div class="fade-up size">
      <p>下からフェードイン</p>
      <img src="https://drive.google.com/uc?export=view&id=13TBj2wMdMKxukp4GAf2eFYHlS_p9T9bI" alt="" width="200" height="200">
    </div>
</div>

/***フェードイン****/
.fadein-animation{
  display: flex;
  margin-top: 10px;
}
.fade-in {
  margin-right: 30px;
}
.size {
  width: 150px;
  height: 150px;
  margin-right: 30px;
}
.size img {
  width: 100%;
  height: 100%;
  background-color: #e0e4eb;
}
.size p {
  font-size: 14px;
}

/*その場でフェードイン*/
.fade-in img{
  opacity: 0;
  animation: fade-in-anime 2.5s forwards linear infinite;
}
@keyframes fade-in-anime{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*下からフェードイン*/
.fade-up img{
  animation: fade-up-anime 2.5s forwards linear infinite;
}
@keyframes fade-up-anime{
  0% {
    opacity: 0.5;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}