Chrome中的CSS动画棘手错误

Question

我有以下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/

我尝试将其切换为:

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

而且效果很好.

我必须提一下,这个漏洞只出现在Chrome(版本37.0.2062.120基于Debian 7.6,运行在Debian 7.7(281580)(64位))上,我在Firefox和IE11中查看它并且没有问题.

Answer 1

我做了一些实验，发现了一个更简单的解决方案：

-webkit-animation: fade-in 1s linear 1001ms,
    fade-out 1s linear 3s;
-webkit-animation-fill-mode: forwards;

使用 1001ms 代替 1s (=1000ms) 普通人眼不会注意到:)