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上工作

回答

相關問題