Question

我希望这个东西淡出然后淡入。它完美地工作，因为我希望它在Firefox和IE上。但它在Chrome上显示出一种奇怪的“眨眼”。我已经尽可能简单地制作了fadeOut和fadeIn。但似乎没有什么是原因。

HTML：

<body>
    bbbbbbb
</body>

JS：

jQuery('body')
.addClass('fixed-top fadeIn')
        .fadeOut(1000).fadeIn(1000);

CSS：

.fixed-top {
  background:transparent;
  overflow: hidden;
  z-index: 10;

}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}  
  100% {opacity: 1;}
}


.fadeIn {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: backword;
  -webkit-animation-name: fadeIn;
}

Answer 1

问题是由于您为.fadeIn添加的动画持续时间css引起的。删除持续时间css，一切都会完美。

 .fadeIn {
 -webkit-animation-fill-mode: backword;
 -webkit-animation-name: fadeIn;
}

<强> Working Fiddle

Answer 2

我不认为使用jQuery动画的有线CSS3动画是一个好主意。下面的代码可能会有所帮助，只需使用jQuery fadeIn和fadeOut即可。

var $body = jQuery('body')
$body.fadeOut(1000, function () {
    $body.fadeIn(1000); 
});

jQuery fadeIn fadeOut＆＃34; blink＆＃34;在Chrome上，在FireFox和IE上运行良好

2 个答案: