/* CSS Document */
/* https://web-camp.io/magazine/archives/80525/ */

.slider {
  width: 600px;
  height: 400px;
  display: flex;
  overflow: hidden;
  margin: 0 auto;
}

.slider > :first-child {
  -webkit-animation-name: scroll;
  animation-name: scroll;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes scroll {
0% {
  margin-left: 0;
}

5% {
  margin-left: 0;
}

45% {
  margin-left: -100%;
}

50% {
  margin-left: -100%;
}


}