Auto Play Slider by using only HTML & CSS

HTML:

    <div className="scroll-wrapper">

      <div className="scroll-item scroll-item-1"></div>

      <div className="scroll-item scroll-item-2"></div>

      <div className="scroll-item scroll-item-3"></div>

      <div className="scroll-item scroll-item-4"></div>

      <div className="scroll-item scroll-item-5"></div>

    </div>

CSS:

.scroll-wrapper {

  position: relative;

  height: 50px;

  width: 90%;

  margin-inline: auto;

  overflow: hidden;

  mask-image: linear-gradient(

    to right,

    rgba(0, 0, 0, 0),

    rgba(0, 0, 0, 1) 20%,

    rgba(0, 0, 0, 1) 80%,

    rgba(0, 0, 0, 0)

  );

}

@keyframes scrollToLeft {

  to {

    left: -200px;

  }

}

.scroll-item {

  position: absolute;

  top: 0;

  left: 100%;

  background-color: #43a047;

  width: 160px;

  height: 50px;

  animation-name: scrollToLeft;

  animation-duration: 30s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

}

.scroll-item-1 {

  animation-delay: calc(30s / 5 * (5 - 1) * -1);

}

.scroll-item-2 {

  animation-delay: calc(30s / 5 * (5 - 2) * -1);

}

.scroll-item-3 {

  animation-delay: calc(30s / 5 * (5 - 3) * -1);

}

.scroll-item-4 {

  animation-delay: calc(30s / 5 * (5 - 4) * -1);

}

.scroll-item-5 {

  animation-delay: calc(30s / 5 * (5 - 5) * -1);

}