Chrome CSS动画背景图像问题
这是代码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加载延迟）。一切都好！
然后请按小提琴上的“运行”按钮并再次观看。现在，您可以看到幻灯片（div）滚入滚出，而图像SRC发生了更改，但它与bg中的上一个图像一起滚入，并在动画完成后立即进行更改。
我可以向你保证这与图像加载无关，因为这是我真正项目中的一个大问题。
有什么想法吗？
================ 更新
当我将. rollOut不透明度更改为非零（https://html" target="_blank">jsfiddle.net/pk7zetdu/8/）时，问题就消失了。似乎当img父节点的不透明度为0时，chrome不会调整新的SRC，并且在动画中调整时存在问题。
共有2个答案
这是Chrome三月建立的错误。它在最新版本中修复。无论如何（如果你关心三月版本），一个快速的解决方案是在淡出时将不透明度设置为0.0001而不是0。没有好的解决办法。
第二个图像的四周都有阴影。您可以看到，如果在选项卡中打开图像（您将看到图像从顶部到左侧有一些间隙）。因此，您的第二个图像不会与背景中的第一个图像一起加载。这只是第二张周围有白色缺口的图像。
改变图像就可以了。用不同的图像检查这个小提琴。-https://jsfiddle.net/pk7zetdu/11/
对于第二个图像在3秒后没有滚动，您可以将setTimeout更改为setInterval
-
我正在尝试创建背景色CSS3关键帧动画后的第一个动画，这是一个背景图像。我无法创建另一个动画后，文字动画淡出。文本动画褪色后，我想背景的不透明度转到0.3，并再次褪色在文本。下面是我所拥有的。 请在此处查看完整代码：codepen：https://codepen.io/imdaone/pen/jjryyv
-
问题内容： 是否可以重新启动用作动画GIF ？ 考虑以下HTML： 而这种风格： 我想在动画播放每次我的类添加时间到，不只是第一次。 我希望这可以工作： 问题在于，一旦Firefox和WebKit浏览器播放一次，它们就不会再次播放背景图像GIF动画。添加/删除班级眨眼仅在第一次时有效。 问题答案： 您可以通过重新加载动画来重播gif。这对于带宽来说并不是理想的选择，尤其是在您的图像较大的情况下，但
-
我有一个带有背景图像的HTML5画布元素。用户被允许在图像上绘制，然后需要保存完整的画布元素与背景。我使用下面的代码保存部分，但它只得到画布绘图，而不是背景图像。我还可以做什么来获得背景图像？ 更新： 我的HTML 我有上面的div在我的HTML页面。然后我动态地创建画布并在其上绘制。这是一个有点长的代码。
-
我有一个带有平铺背景图像和边框图像的Div。边框图像是带有角设计的透明. png，所以边框周围大约有90像素厚。IE在边框内启动背景图像，其中FF、Chrome和Safari在边框的外部边缘启动背景图像。在IE中，这会导致背景颜色（或主体的背景）通过透明. png边框图像显示。我尝试了背景剪辑和位置，让IE从边框外部开始背景图像，但没有运气。 我错过了什么或建议吗？样品现在就直播@样品 } 父对象
-
除了背景颜色，也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中，使用 background-image属性来定义背景图像的路径，取值为 none | url，默认值为 none。 url 可以是相对路径，也可以是绝对路径。使用相对路径时，url 是相对于 css 所在的文件，而不是要设置样式的HTML文件。如，下面代码表示，使用 css 文件所在目录下的 img 文件夹下的图像 bg.g
-
我对flutter非常陌生，我正在做一个有趣的应用程序。我想添加一个背景图像到我的应用程序，但我找不到如何。我知道我必须把它放在中，但我找不到怎么放。这是我的代码：