CSS轉換隻在Firefox

工作我試圖使用CSS轉換，使背景圖像淡出我的菜單上，當你在它懸停。我想要它花費大約2秒鐘來淡化它。它可以在Firefox中正常工作，但在其他瀏覽器上它只是立即出現。在IE中它根本不起作用，但我並不擔心，因爲我從來沒有想到它會起作用。CSS轉換隻在Firefox

CSS佈局

.mainmenu ul li{ 
    height: 86px; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    z-index:1000; 
    position: relative; 
} 
.mainmenu li:after{ 
    content: ""; 
    opacity: 0; 
    -webkit-transition: opacity 1.5s; 
    -moz-transition: opacity 1.5s; 
    -o-transition:  opacity 1.5s; 
    -ms-transition:  opacity 1.5s; 
    transition:   opacity 1.5s; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
} 
.mainmenu li:hover:after{ 
     opacity: 1; 
}

CSS外觀

.mainmenu li:after{ 
    background: url(../images/hover.png) no-repeat center bottom; 
}

HTML

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

誰能幫助？除了IE瀏覽器之外，它還可以讓圖片顯示出來，但是在Chrome，Safari和Opera上的淡入淡出效果會很好。如果我能得到它的工作，那麼，我甚至可以考慮IE。

來源

2013-03-19 Richard Young

我不知道這是否會幫助，但我不喜歡的轉變例如'transition：all ease 0.4s;'因爲某些原因，在chrome中不起作用，即使我做了'-webkit-transition：所有緩解0.4s;'而是我必須這樣做'-webkit-transition ：全部0.4s緩解;' – iConnor 2013-03-19 12:25:59

根據CSS技巧，這在Chrome 1/3/13中得到了修復，但在最新的Chrome上，測試用例似乎不適用於我。我絕對不會樂意支持這種功能的這種零散的支持。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/ – 2013-03-19 12:36:49

作爲@Tyriar狀態，用於轉換支撐/生成的內容的動畫是不規則。它適用於最新的Chrome Canary（版本27.0.1444.3），因此很快它將在正規渠道上發佈。當這種情況發生時，IE10，Firefox 4+和Chrome將支持這一功能。 Safari（和Opera，除了可能會改變的move to WebKit）還有一個明顯的例外。

現在最強大的解決方案將避免試圖轉換:after內容，而是將其應用於您現有的某個元素。這會讓你pretty good browser support達到68％。

這是你原來的例子的a fork。而不是使用生成的內容，我已經簡化了CSS這樣：

.mainmenu li { 
    position: relative; 
    display: inline-block; 
    height: 86px; 
    margin: 0; 
    padding: 0; 
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom; 
} 

.mainmenu li a { 
    position: relative; 
    display: block; 
    height: 100%; 
    background: #fff; 
    transition: all 1.5s ease-in-out; 
} 

.mainmenu li a:hover { 
    background: transparent; 
}

在此，過渡是在a本身，衰落，從白色到透明以實現相同的效果。

來源

2013-03-19 12:42:31 CherryFlavourPez

這看起來不錯。我會試一試，讓你知道。感謝這樣的qucik回覆。 – 2013-03-19 16:09:01

這可以通過頂部或懸停上的漸變背景或背景圖像來實現嗎？ – 2013-03-19 17:00:55

不確定你究竟是什麼，但你不能過渡漸變（還） - 請參閱[這個問題]（http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds ）。 – CherryFlavourPez 2013-03-19 17:11:34

如前所述，在:psuedo元素的CSS轉換不具有最大的支持。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/

隨着直HTML/CSS，你可以這樣做，但你需要一個額外的元素巴掌，這裏有一個快速的小提琴：http://jsfiddle.net/9uwVb/

來源

2013-03-19 12:48:23 jarmie

CSS轉換隻在Firefox

回答

相關問題