<div class="scrolling-words-container">
  <div class="scrolling-words-box">
    <ul>
      <li style="color: #ea4335">Code</li>
      <li style="color: #4285f4">Build</li>
      <li style="color: #34a853">Create</li>
      <li style="color: #fbbc04">Design</li>
      <li style="color: #ea4335">Code</li>
    </ul>
  </div>
  <span style="color: #5f6368">for everyone</span>
</div>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrolling-words-container {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 600; 
}

.scrolling-words-box {
  height: 3rem;
  margin: auto;
  overflow: hidden;
  
  ul {
    margin: 0 0.625rem;
    padding: 0;
    animation: scrollUp 4s infinite;
    li {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 3rem;
      list-style: none; 
    }
  }
}

// Variables
$item-count: 5;

@keyframes scrollUp {
  @for $i from 1 through ($item-count - 1) {
    #{($i * 25) - 10%}, #{$i * 25%} {
      transform: translateY((-100% / $item-count) * $i);
    }
  }
}