<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.