这是代码 https://jsfiddle.net/pk7zetdu/6/ 的链接
$('.img_cont').addClass('rollIn');
setTimeout(function(){
$('.img_cont').removeClass('rollIn').addClass('rollOut');
}, 3000);
setTimeout(function(){
$('#img_img').attr('src', 'http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg');
$('.img_co....
尝试用最新稳定的 chrome for windows 打开它。
首先，当它加载时，您可以看到幻灯片 (div) 滚入和滚出，然后图像 SRC 发生更改，div 第二次滚入新 bg(可能有一个小的 img 加载延迟)。一切顺利!
然后请按 fiddle 中的RUN键再看一遍。您现在可以看到幻灯片 (div) 滚入和滚出，而不是图像 SRC 已更改，但它与 bg 中的先前图像一起滚入并在动画完成后立即更改。
我可以向您保证这与图像加载或自行摆弄无关，因为这在我的实际元素中是个大问题。 -webkit-backface-visibility:隐藏；在 IMG 上解决了这个问题，但在更严重的例子中引入了其他问题:(。
有什么想法吗？
================更新
当我将 .rollOut 不透明度更改为非零值 ( https://jsfiddle.net/pk7zetdu/8/ ) 时，问题就消失了。貌似当img parent的opacity为0时，chrome并没有调整新的SRC，在动画中调整有问题。
最佳答案
您的第二张图片的四周都有阴影。你可以看到，如果你在选项卡中打开图像(你会看到图像从顶部和左侧有一些间隙)。 所以你的第二张图片不会加载背景中的第一张图片。它只是第二张图片周围有白色间隙。
更改图像即可解决问题。用不同的图像检查这个 fiddle 。 - https://jsfiddle.net/pk7zetdu/11/
对于3秒后第二张图还没有出来，可以把setTimeout改成setInterval
关于jquery - Chrome CSS 背景图片动画问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36404681/