.d-card-box{
  position: relative;
  width:100%;
  height: 100%;
  margin-top: 130px;
  background: rgba(0, 0, 0, 0);
  transition: 0.5s;
}
.d-card-box img {
  position: absolute;
  width: 100%;
  transition: 0.5s;
}
.d-card-box img:nth-child(1) {
  animation: TranslateAnimeNth1 linear forwards normal;
  animation-timeline: view();
  opacity: 0.4;
  transform: translate(0px, 0px);
}
.d-card-box img:nth-child(2) {
  animation: TranslateAnimeNth2 linear forwards normal;
  animation-timeline: view();
  opacity: 0.6;
  transform: translate(0px, 0px);
}
.d-card-box img:nth-child(3) {
  animation: TranslateAnimeNth3 linear forwards normal;
  animation-timeline: view();
  opacity: 0.8;
  transform: translate(0px, 0px);
}
.d-card-box img:nth-child(4) {
  animation: TranslateAnimeNth4 linear forwards normal;
  animation-timeline: view();
  opacity: 1;
  transform: translate(0px, 0px);
}
@keyframes TranslateAnimeNth1 {
  50% { transform: translate(40px, -40px); }
  100% { transform: translate(40px, -40px); }
}
@keyframes TranslateAnimeNth2 {
  50% { transform: translate(80px, -80px); }
  100% { transform: translate(80px, -80px); }
}
@keyframes TranslateAnimeNth3 {
  50% { transform: translate(120px, -120px);}
  100% { transform: translate(120px, -120px);}
}
@keyframes TranslateAnimeNth4 {
  50% { transform: translate(160px, -160px); }
  100% { transform: translate(160px, -160px); }
}