#window {
  position: relative;
  width: 500px;
  height: 885px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 1);
  margin: 50px auto;
}
#window_frag5 {
  position: relative;
  width: 500px;
  height: 885px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 1);
  margin: 50px auto;
}

#all {
  display: flex;
  width: 2000px;
  height: 885px;
  background: #444;
  animation: slide4 12s ease-in-out infinite;
}

#all_frag5 {
  display: flex;
  width: 2000px;
  height: 885px;
  background: #444;
  animation: slide4 12s ease-in-out infinite;
}
#all span {
  flex: 0 0 500px;
  width: 500px;
  height: 885px;
}
#all_frag5 span {
  flex: 0 0 500px;
  width: 500px;
  height: 885px;
}
#all span img {
  display: block;
  width: 500px;
  height: 885px;
  object-fit: cover;
}
#all_frag5 span img {  
  display: block;
  width: 500px;
  height: 885px;
  object-fit: cover;
}
#window:hover #all {
  animation-play-state: paused;
}
#window_frag5:hover #all_frag5 {
  animation-play-state: paused;
}
@keyframes slide4 {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-500px);
  }

  45% {
    transform: translateX(-500px);
  }

  50% {
    transform: translateX(-1000px);
  }

  70% {
    transform: translateX(-1000px);
  }

  75% {
    transform: translateX(-1500px);
  }

  95% {
    transform: translateX(-1500px);
  }

  100% {
    transform: translateX(0);
  }
}