Scroll content horizontally

by jt3k

HTML

<div class="scroller">
  <div class="scroller__inner">
    <div class="scroller__item scroller__item_one">Первый блок</div>
    <div class="scroller__item scroller__item_two">Второй блок</div>
  </div>
</div>

CSS

.scroller {
  overflow: hidden;
  --scroll-speed: 3s;
}

.scroller__inner {
  display: flex;
  min-width: 200vw;
}

.scroller__item {
  min-width: 100vw;
  flex-shrink: 0;
  animation: var(--scroll-speed) linear infinite scroll;
  animation-delay: 0s;
  will-change: scroll, transform;
  font-size: 144px;
}

.scroller__item_one {
  animation-delay: -var(--scroll-speed);
  background-color: lime;
}

.scroller__item_two {
  background-color: pink;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}