h1 {
  .word-animation {
    overflow: hidden;

    span {
      color: #4ec7f3;
      display: block;
      text-transform: capitalize;
      animation: rotateSpin 10s infinite;

      &.red {
        color: red;
      }

      &.orange {
        color: orange;
      }

      &.blue {
        color: blue;
      }
    }
  }
}

@keyframes rotateSpin {
  10% {
    -webkit-transform-style: translateY(-102%);
    transform: translateY(-102%);
  }

  25% {
    -webkit-transform-style: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform-style: translateY(-202%);
    transform: translateY(-202%);
  }

  50% {
    -webkit-transform-style: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform-style: translateY(-302%);
    transform: translateY(-302%);
  }

  75% {
    -webkit-transform-style: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform-style: translateY(-402%);
    transform: translateY(-402%);
  }

  100% {
    -webkit-transform-style: translateY(-400%);
    transform: translateY(-400%);
  }
}