Chrome中CSS动画的一个棘手bug

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中检查过，那里没有问题。

- Kevin Kopf

---

我尝试从你的问题中创建了一个简化的测试案例，并在https://code.google.com/p/chromium/issues/detail?id=431580上报告了它。 - Rob W

Answer 1

不是真正的错误修复，但可以作为一种替代方案。

不要将元素本身的关键帧动画和动画组合在一起，而是将它们全部放在关键帧动画中。

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

- Frankey

Answer 2

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

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

使用1001毫秒而不是1秒（= 1000毫秒）对于普通人眼睛来说不会有任何影响 :)

- Kevin Kopf