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>

当我运行时，＆＃34;你好＆＃34;在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

虽然它可能是另一种选择，但并不是真正的错误修正。

为什么不把它全部放在关键帧动画中，而不是在元素本身上用关键帧+动画制作元素？

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

Answer 2

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

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

使用1001ms代替1s（= 1000ms）将不会被常规人眼注意到：）

Chrome中的CSS动画棘手错误

2 个答案: