<h2>
    My favorite baseball team is the 
      <div class="words">
        <span>dodgers</span>
        <span>giants</span>
        <span>mariners</span>
        <span>A's</span>
        <span>angels</span>
        <span>mets</span>
        <span>yankees</span>
        <span>reds</span>
        <span>padres</span>
        <span>astros</span>
        <span>royals</span>
        <span>cardinals</span>
        <span>cubs</span>
        <span>pirates</span>
        <span>indians</span>
        <span>red socks</span>
        <span>white socks</span>
        <span>marlins</span>
        <span>blue jays</span>
        <span>brewers</span>
        <span>braves</span>
        <span>tigers</span>
        <span>nationals</span>
        <span>twins</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: 24;

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

@mixin animation-delay($time) {
  -webkit-animation-delay: $time; 
	-ms-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); 
  }
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 0; -webkit-transform: translateY(-30px); }
    2% { opacity: 1; -webkit-transform: translateY(0px); }
    4% { opacity: 1; -webkit-transform: translateY(0px); }
    5% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 0; -webkit-transform: translateY(-30px); }
    2% { opacity: 1; -webkit-transform: translateY(0px); }
    4% { opacity: 1; -webkit-transform: translateY(0px); }
    5% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    1% { opacity: 0; -webkit-transform: translateY(-30px); }
    2% { opacity: 1; -webkit-transform: translateY(0px); }
    4% { opacity: 1; -webkit-transform: translateY(0px); }
    5% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.