実際の動作は下記で見ることができます。
http://jsfiddle.net/junya_5102/txxxxy6q/1/
html
<p>好きな動物は</p>
<p class="texts">
<span>ねこ</span>
<span>いぬ</span>
<span>カワウソ</span>
<span>カピバラ</span>
</p>
<p>です。</p>
css
p{
font-size: 1.5em;
display: inline-block;
vertical-align: top;
}
.texts{
width: 5.5em;
height: 1.5em;
border: 1px solid red;
text-align: center;
overflow-y: hidden;
}
.texts span{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
/* アニメーション */
.texts span{
animation: ShiftText 10s linear infinite;
}
@keyframes ShiftText{
0%{
opacity: 0;
}
1%,25%{
top: 0;
opacity: 1;
}
26%,50%{
top: -1.5em;
}
51%,75%{
top: -3em;
}
76%,100%{
top: -4.5em;
}
}