<h2>
    My favorite baseball team is the 
      <div class="words">
        <span>One dodgers</span>
        <span>Two giants</span>
        <span>Three mariners</span>
      </div>
  </h2>

body {
  background: #fff;
  margin: 0;
}

h2 {
  width: 600px;
  margin: 2em auto;
  font: 400 40px/1.4em "Courier", monospace;
  color: #333;
}

.words {
  display: inline;
  text-indent: 20px;
}

$totalWords: 3;

@mixin animation($name, $time, $easing, $iteration-count, $start-delay) {
  animation: $name $time $easing $iteration-count $start-delay;
}

@mixin animation-delay($time) {
  animation-delay: $time;
}

.words span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #3a539b;
  @include animation(
    rotateWord,
    $totalWords * 3 + s,
    ease-in-out,
    infinite,
    0s
  );
}

@for $i from 2 through $totalWords {
  .words span:nth-child(#{$i}) {
    @include animation-delay(3 * ($i - 1) + s);
  }
}

@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    transform: translateY(-30px);
  }
  20% {
    opacity: 1;
    transform: translateY(0px);
  }
  40% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}