CSS3轉換淡出沒有發生

我想讓我的div淡出使用純CSS。但是它沒有做擋光，不透明度沒有改變？CSS3轉換淡出沒有發生

我的代碼有什麼問題？

<html> 
<head> 
    <style type="text/css"> 
    body { 
     background-color: red; 
    } 

    #box{ 
     width: 300px; 
     height: 300px; 
     background-color: green; 
     -moz-box-shadow: 0px 0px 5px 5px #cc6600; 
     -webkit-box-shadow: 0px 0px 5px 5px #cc6600; 
     -webkit-transition: opacity 5s; 
     -webkit-transform: opacity: 0; 
     -webkit-transition-delay: 1s; 
     -moz-transition: opacity 5s; 
     -moz-transform: opacity: 0; 
     -moz-transition-delay: 1s; 
    } 
    </style> 
</head> 
<body> 

<div id="box"> 
Insert your content in here... 
</div> 


</body> 
</html>

來源

2011-12-13 Jake M

這些線是無效的語法：

-webkit-transform: opacity: 0; 
-moz-transform: opacity: 0;

不透明是不是可以用「改造」中使用。有關如何使用變換的說明，請參見here。此外，變換不是你在這裏需要進行不透明轉換的地方，因爲你的對象會淡出。

另外，當一個對象在一個狀態中存在，然後對其應用第二個狀態（通常是通過向該對象添加一個類）時，會觸發CSS3轉換。第二個狀態指定了一組不同的CSS規則，然後該對象可以根據您的轉換設置從第一個狀態「轉換」到第二個狀態。

您剛剛在#box CSS規則中爲您的對象指定了一個狀態。如果你想要轉換，那麼你必須指定第二個狀態和一些觸發應用第二個狀態的事件。

例如，該CSS會淡出框，當鼠標懸停在它：

#box{ 
    width: 300px; 
    height: 300px; 
    background-color: green; 
    -moz-box-shadow: 0px 0px 5px 5px #cc6600; 
    -webkit-box-shadow: 0px 0px 5px 5px #cc6600; 

    -webkit-transition: opacity 3s; 
    -moz-transition: opacity 3s; 
} 

#box:hover { 
    opacity: 0; 
}

這裏既有通過鼠標懸停和過渡引發了過渡的工作演示從通過一個按鈕來添加類引發點擊：http://jsfiddle.net/jfriend00/ZWG5Y/。

在這個演示中，我們有一個起始狀態，並指定了一些轉換參數。然後，在第二個狀態（由鼠標懸停在此處觸發）中，我們指定了第二個狀態，即在應用第二個狀態時對象將轉換到第二個狀態。

來源

2011-12-13 23:28:58 jfriend00

它是後多餘的冒號在這兩條線「不透明度」：

-webkit-transform: opacity: 0; 

-moz-transform: opacity: 0;

來源

2011-12-13 23:29:06 nnnnnn

CSS3轉換淡出沒有發生

回答

相關問題