CSS テキスト切り替えアニメーション

実際の動作は下記で見ることができます。
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;
  }
}