Marquee

marquee.html

<div class="hero__marquee marquee">
  <div class="marquee__text">
    <!-- HTML Markup -->
  </div>
  <div class="marquee__text">
    <!-- HTML Markup -->
  </div>
  <div class="marquee__text">
    <!-- HTML Markup -->
  </div>
</div>

marquee.scss

/*-------------------------------
Marquee
-------------------------------*/

// Structure

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
}

// Text

.marquee__text {
  white-space: nowrap;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: marquee--left;
}

/*-------------------------------
Animation
-------------------------------*/

@keyframes marquee--left {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes marquee--right {
  0% {
    transform: translate(-100%, 0);
  }
  100% {
    transform: translate(0%, 0);
  }
}