CSS3拒絕過渡正確

我在使用CSS和過渡的一些問題。我可以讓它做平滑的過渡（它幻燈片）或瞬間過渡（我希望它是一個平滑的淡入淡出效果）CSS3拒絕過渡正確

我的解決方案必須是純html/css。（我不想使用JavaScript/jQuery和之類的周邊猴）

一個活生生的例子是my website。（我希望我的最終結果是中間圖標的過渡，但是漸變）

我正在使用圖像的精靈。

下面是電流源：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#navlist{position:relative;} 
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
#navlist li, #navlist a{height:32px;display:block;} 

#home{left:0px;width:32px;} 
#home a{background:url('http://www.aeonsplice.com/testicons.png') 0 0;} 
#home a:hover{background: url('http://www.aeonsplice.com/testicons.png') 0 32px;-webkit-transition:0.5s;} 

#prev{left:32px;width:32px;} 
#prev a{background:url('http://www.aeonsplice.com/testicons.png') 32px 0;} 
#prev a:hover{background: url('http://www.aeonsplice.com/testicons.png') 32px 32px;-webkit-transition:0.5s fade;} 

#next{left:64px;width:32px;} 
#next a{background:url('http://www.aeonsplice.com/testicons.png') 64px 0;} 
#next a:hover{background: url('http://www.aeonsplice.com/testicons.png') 64px 32px;-webkit-transition:0.5s linear;} 
</style> 
</head> 

<body> 
<ul id="navlist"> 
    <li id="home"><a href="#"></a></li> 
    <li id="prev"><a href="#"></a></li> 
    <li id="next"><a href="#"></a></li> 
</ul> 
</body> 
</html>

來源

2013-07-24 Athix

您不僅需要提供'-webkit-transition：0.5s淡入淡出;'但您還必須包含'-moz-transition：0.5s淡出;'和'transition：0.5s淡入淡出' –

我知道另一個瀏覽器的轉換，但當我僅使用一個瀏覽器（chrome/webkit）使用測試頁時，它們僅僅是多餘的。 – Athix

你應該使用不透明，使淡入淡出效果

這裏是你的CSS http://jsfiddle.net/3jqcX/

#navlist { 
    position:relative; 
} 
#navlist li { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position:absolute; 
    top:0; 
} 
#navlist li, #navlist a { 
    height:32px; 
    display:block; 
} 
#home { 
    left:0px; 
    width:32px; 
} 
#home a { 
    background:url('http://www.aeonsplice.com/testicons.png') 0 0; 
} 
#home a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 0 32px; 
    -webkit-animation:fade 0.5s 
} 
#prev { 
    left:32px; 
    width:32px; 
} 
#prev a { 
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0; 
} 
#prev a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px; 
    -webkit-animation: fade 0.5s; 
} 
#next { 
    left:64px; 
    width:32px; 
} 
#next a { 
    background:url('http://www.aeonsplice.com/testicons.png') 64px 0; 
} 
#next a:hover { 
    background: url('http://www.aeonsplice.com/testicons.png') 64px 32px; 
    -webkit-animation: fade 0.5s; 
} 
@-webkit-keyframes fade { 
    0% { 
     opacity:0; 
    } 
    50% { 
     opacity:0.5; 
    } 
    100% { 
     opacity:1 
    } 
}

來源

2013-07-24 04:07:20 Hushme

它具有與淡入淡出完全相同的效果。（即時轉換）改變了第一個圖標不透明度爲證明這一點。 – Athix

我創建了一個小提琴，請檢查鏈接 – Hushme

就像一個魅力。具體來說，@ -webkit-keyframes位。 :) – Athix

不能直接之間交叉衰減使用CSS3的圖像區域。對於這些情況，淡化屬性無效。然而，你可以在兩種不同的圖像之間交叉淡入淡出。

這裏有一個鏈接，這將解釋： http://css3.bradshawenterprises.com/cfimg/

來源

2013-07-24 04:08:45

所以會使用兩個精靈的工作，否則我將不得不爲每個圖標單獨的圖像？（能夠使用精靈是強烈的首選） – Athix

首先，褪色不是預定義的寬鬆功能......所以你需要像你是#next使用標準的放心。你也需要設置過渡上#prev一個像這樣：

#prev a{ 
    background:url('http://www.aeonsplice.com/testicons.png') 32px 0; 
    -webkit-transition: all 0.5s; 
} 
#prev a:hover{ 
    background: url('http://www.aeonsplice.com/testicons.png') 32px 32px; 
}

淡出2個圖像輕鬆無添加到您的標記......只是改變了背景到另一個圖像（即testicons懸停。 PNG）......據我所知，所有支持轉換的瀏覽器都會淡入淡出圖像。

來源

2013-07-24 04:15:08 ericjbasti

CSS3拒絕過渡正確

回答

相關問題