Chrome 中的 CSS 动画棘手错误

我有以下 CSS：

@-webkit-keyframes fade-out {
    from {  opacity: 1; }
    to {  opacity: 0; }
}
@-webkit-keyframes fade-in {
    from {  opacity: 0; }
    to {  opacity: 1; }
}
.intro-text-0 {
    opacity: 0;
    -webkit-animation: fade-in 1s linear 1s,
        fade-out 1s linear 3s;
    -webkit-animation-fill-mode: forwards;
}
.intro-text-1 {
    opacity: 0;
    -webkit-animation: fade-in 1s linear 2s,
        fade-out 1s linear 4s;
    -webkit-animation-fill-mode: forwards;
}

以及简单的 HTML 代码：

<div class="intro-text-0">Hello</div>
<div class="intro-text-1">Holla</div>

当我运行它时，“Hello”会在 1 秒内出现，并在 3 秒内出现，而不是淡出 1 秒，而是立即淡出。这是 JSFiddle 上的：http://jsfiddle.net/3er6y0df/ http://jsfiddle.net/3er6y0df/

我尝试将其切换为：

.intro-text-0 {
    opacity: 0;
    -webkit-animation: fade-in 1s linear 2s,
        fade-out 1s linear 4s;
    -webkit-animation-fill-mode: forwards;
}

而且效果很好。

我必须提到，这个bug只出现在Chrome中（版本37.0.2062.120在Debian 7.6上构建，在Debian 7.7（281580）（64位）上运行），我在Firefox和IE11中检查它没有问题。

虽然它可能是一个替代方案，但并不是真正的错误修复。

与其使用关键帧+元素本身的动画来对元素进行动画处理，为什么不将其全部放入关键帧动画中呢？

@keyframes AnimateMe {
  0%   { opacity:0%; }
  80% { opacity:100%; }
  100% { opacity:0%; }
}