JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<div class="container">
    <div class="line line-left">
      <span class="line-item line-item_first">html5. css3. photoshop. javascript. jquery. design. bootstrap. material-ui.</span>
      <span class="line-item line-item_second">html5. css3. photoshop. javascript. jquery. design. bootstrap. material-ui.</span>
    </div>
    <div class="line line-right">
      <span class="line-item line-item_first">es6. babel. webpack. nodejs. rxjs. kosjs. expressjs. rollup. browserify.</span>
      <span class="line-item line-item_second">es6. babel. webpack. nodejs. rxjs. kosjs. expressjs. rollup. browserify.</span>
    </div>
</div>

SCSS

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  overflow: hidden;
  width: 100%;
  border: 2px solid purple;
  background: yellow;
  position: relative;
}

.line {
  font-size: 20vw;
  white-space: nowrap;
  display: flex;
}

.line-item {
  display: inline-flex;
}

.line-left .line-item_first {
  animation: marquee-left 5s linear infinite;
  background: red;
  opacity: 0.4;
  transform: translateX(100%);
  // transition: all 5s linear;
}
.line-left .line-item_second {
  animation: marquee-left-second 20s linear infinite;
  background: blue;
  animation-delay: 11s;
  opacity: 0.4;
  transform: translateX(100%);
  display: none;
}

.line-right {
  display: none;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0%);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(100%);
    display: none; 
    opacity: 0;
  }
}

@keyframes marquee-left-second {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-200%);
  }
}

/* @keyframes marquee-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
} */