css转换不能在Firefox上工作

我有一个类似的问题，作为CSS Transition not firing when adding class to body (Firefox)但我似乎找到一种方法来解决它以不同的方式针对元素或删除类。css转换不能在Firefox上工作

以下是我有：

标记：

   <div class="ball b40 first"> 
        <a class="ffx-fx" href="javascript:void(0)"> 

        </a> 
       </div>

CSS：

.ffx-fx { 
-webkit-transition: all 1.5s ease-in-out; 
    -moz-transition: all 1.5s ease-in-out; 
    -o-transition: all 1.5s ease-in-out; 
    -ms-transition: all 1.5s ease-in-out; 
     transition: all 1.5s ease-in-out; 
} 
.b40 a   { 
width:220px; 
height:220px; 
background: url(../images/temp/1_a.jpg) center center; 
background-size: 100% 100% !important;

}

.b40 .b40-rotated { 
width:220px; 
height:220px; 
background: url(../images/temp/1_b.jpg) center center !important;

}

个

JS：

window.setInterval(function() { 
    $(".b40 .ffx-fx").toggleClass("b40-rotated"); 
}, 5000);

来源

2014-12-02 user2300867

所以应该发生什么，转换似乎被设置在一个不同的元素上，而不是你要改变类的元素。它在其他浏览器中工作吗？ – adeneo 2014-12-02 23:47:04

您不能在背景图像之间切换。但是，您可以堆叠背景图像并更改不透明度。 [这是可以动画的属性的便利列表。]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties） – misterManSam 2014-12-03 00:22:15

我不相信你可以切换出的背景图像与过渡。至少我没有尝试过。我通常如何处理这种情况是有两个内部分区 - 一个是悬停类，一个是悬空类。然后在盘旋时，我改变了不透明度。不透明度过渡的作品。 SOOO这样的事情...

HTML

<div class="container"> 
    <a href=""> 
    <div class="off_state"></div> 
    <div class="on_state"></div> 
</a> 
</div>

CSS

.container{position:relative;} 
.off_state, .on_state{ 
    position:absolute; 
    top:0; 
    left:0; 
    transition: all 1s; 
} 
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);} 
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}

这是一个粗略的版本，但是这是我怎么总是做了。

注：jQuery UI也有能力缓慢地添加一个类。你可以在这里查看它：http://jqueryui.com/addClass/。它可能会更容易使用。

来源

2014-12-03 00:17:38 cbloss793

css转换不能在Firefox上工作

回答

相关问题