Javascript CSS转换不适用于Firefox

TLDR

为什么背景图像发生变化时Firefox中没有应用任何效果

（firefox上没有FX，在Chrome/Safari上工作）

确实读过

我有一个类似于滑块的组件，回调时内容会发生变化，但在使用Firefox进行测试时，转换效果不起作用

我在下面创建了一个简化的小提琴来演示这个问题。下面的提琴与Chrome/Safari配合使用，但Firefox没有过渡效果。图像只是瞬间改变

问题不在于转换本身，而在于修改后的小提琴。我在元素中添加了边距，firefox通过特效处理过渡，这意味着边距不是“立即”应用的，而是相当平滑的，因此您可以看到元素在滑动

---

我宁愿不使用img元素的图像，我需要他们的背景图像与css应用。我知道我可以在img元素上编写一些javascript，比如简单的淡出。但我宁愿把这些图像用作背景图像，这给了我更多的灵活性

我已经更新了你的提琴，请查看样式，你必须使用-webkit-transition/moz-transition和o-transition。这是为了确保与所有浏览器兼容

---

根据，Firefox不支持背景图像转换

我不确定这是否会对您有所帮助，但您可以尝试在滑块中创建所有图像的精灵。精灵可以是垂直的，也可以是水平的。根据sprite的风格，您可以使用

背景位置设置
背景图像
，然后在javascript中更改div的
背景图像
，只需更改主容器的
背景位置即可


Javascript:

var counter = 45
setInterval(function () {
    $('.container').css('background-position',counter+"px");
    counter += 45;
    if (counter>90) counter = 0;
}, 2500);

HTML:

firefox似乎还没有在chrome上的背景imagesEven上实现过渡，你的动画有很多缺陷。没错，但关键是它应用于chrome，而不是FF。在我使用的真实应用程序中，我做了更复杂的事情，并且我没有使用setInterval方法。小提琴只是为了证明我的观点。我建议将图像分配给几个元素，并更改它们的显示属性，而不是一个元素的背景img。至少在Chrome中，图像不会被缓存，每次更改src属性时页面都会加载图像。对于页面上的任何人来说，这都是不必要的网络流量，即使他们处于非活动状态，这也会使动画看起来有问题，因为图像的数据在转换开始时不在那里。在生产版本中，它们被缓存，小提琴的主要点仅是转换部分，其他一切都可以忽略。但是谢谢，缓存一切总是好的。FF，chrome，IE（opera？）已经删除了转换属性的供应商前缀，我没有弄错。检查一下这个谢谢，但是FF从版本16开始就支持非供应商前缀的转换，而chrome从版本26开始就支持。谢谢，FF似乎还不支持它，很可能它得到了“修复”过了一段时间。
// Code from the modified fiddle
var backgroundImages = [
'http://lorempixel.com/400/200/sports/1/',
'http://lorempixel.com/400/200/sports/2/',
'http://lorempixel.com/400/200/sports/3/', ];

var counter = 0;
setInterval(function () {
    $('.item').css({
        backgroundImage: 'url(' + backgroundImages[counter] + ')',
        margin: counter + 'em'
    });
    counter += 1;
    if (counter == 3) counter = 0;
}, 2500);

.container {
    position: relative;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
.item {
    background-repeat: no-repeat;
    height: 200px;
    width: 400px;
    position: absolute;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}

var counter = 45
setInterval(function () {
    $('.container').css('background-position',counter+"px");
    counter += 45;
    if (counter>90) counter = 0;
}, 2500);

<div class="container"></div>

.container {
    position: relative;
    background-image:url('http://www.w3schools.com/css/img_navsprites.gif');    
    transition: background-position 3.5s ease;
    width:43px;
    height:44px;
    background-position:0 0;
}