我有以下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中检查过,那里没有问题。