Carousel css

carousel-scss.txt

HTML code:
<div class="carousel__frame">
<div class="carousel">
<img class="active" src="./images/500px-Prime-76414647.jpg" alt="" width="320px" height="160px">
<img class="active" src="./images/500px-Prime-95484115.jpg" alt="" width="320px" height="160px">
<img class="active" src="./images/500px-Prime-85409619.jpg" alt="" width="320px" height="160px">
<img class="active" src="./images/500px-Prime-76414647.jpg" alt="" width="320px" height="160px">
</div>
</div>

SCSS code:
.carousel {
  display: flex;
  flex-direction: row;
  &__frame {
    width: 320px;
    overflow: hidden;
  }
}

.active {
  animation: push 8s linear infinite;
}

@keyframes push {
  0% {transform: translateX(0);}
  10% {transform: translateX(0);}

  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }

  60% { transform: translateX(-200%); }
  75% { transform: translateX(-200%); }

  90% { transform: translateX(-300%); }
  100% { transform: translateX(-300%); }
}