Chrome中的CSS动画棘手的错误 [英] CSS animation tricky bug in Chrome

问题描述

我有以下CSS：

  @  -  webkit-keyframes淡出{
 from {opacity： 1; } 
到{opacity：0; } 
} 
 @ -webkit-keyframes淡入{{b $ b from {opacity：0; } 
到{opacity：1; } 
} 
 .intro-text-0 {
 opacity：0; 
 -webkit-animation：淡入1s线性1s，
淡出1s线性3s; 
 -webkit-animation-fill-mode：forwards; 
} 
 .intro-text-1 {
 opacity：0; 
 -webkit-animation：淡入1s线性2s，
淡出1s线性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：淡入1s线性2s，
淡出1s线性4s; 
 -webkit-animation-fill-mode：forwards; 
} 
  

它完美地运作。

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

解决方案

我已经尝试了一下，发现了一个更简单的解决方案：

  -webkit-animation：淡入1s线性1001ms，
淡出1s线性3s; 
 -webkit-animation-fill-mode：forwards; 
  

使用1001ms而不是1s（= 1000ms）将不会被常规人眼注意到： p>

I have the following 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;
}

And the simple HTML code:

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

When I run it, "Hello" appear in 1 second and in 3 seconds instead of fading out for 1 second, it fades out instantly. Here it is on JSFiddle: http://jsfiddle.net/3er6y0df/

I tried switching it to this:

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

And it works perfectly.

I must mention, that this bug appeared only in Chrome (Version 37.0.2062.120 Built on Debian 7.6, running on Debian 7.7 (281580) (64-bit)), I check it out in Firefox and IE11 and there is no problem there.

解决方案

I have experimented a bit and found a much simpler solution:

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

Using 1001ms instead 1s (=1000ms) will not be noticed by a regular human eye :)

这篇关于Chrome中的CSS动画棘手的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！