CSS3 - 淡入淡出效果

我正嘗試在使用CSS3的div上創建淡入淡出效果。CSS3 - 淡入淡出效果

我可以讓div淡入，但是，我似乎無法讓div在淡入效果之前不可見。

我最終想用我的網頁中的多個div做到這一點。

我創建的是我到目前爲止有一個簡單的小提琴http://jsfiddle.net/dan_gribble/Aq4nK/

HTML是：

<div id="test"> 
</div>

CSS是：

#test { 
    position: absolute; 
    top: 10px; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    border: 2px solid black; 
    background-color: red; 

    -webkit-animation: fadein_screen_01 2s; -webkit-animation-delay: 2s; 
    -moz-animation: fadein_screen_01 2s; -moz-animation-delay:  2s; 
    -ms-animation:  fadein_screen_01 2s; -ms-animation-delay:  2s; 
    -o-animation:  fadein_screen_01 2s; -o-animation-delay:  2s; 
    animation:   fadein_screen_01 2s; animation-delay:   2s; 
} 

@-webkit-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-moz-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-ms-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@-o-keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}} 
@keyframes fadein_screen_01 {0% {opacity: 0;} 100% {opacity: 1;}}

任何幫助將不勝感激。

來源

2014-07-17 Dan Gribble

也許我沒有看到正確的東西在這裏，但你的圈子最初是不可見的我。 mac chrome。除此之外，你不能只添加不透明：0到#test css？ –

同樣在這裏。它適用於我在Windows 8上的鉻 – joshboley

謝謝你們，我剛剛在我的辦公室PC（Windows 7專業版）上運行IE11，Firefox 30.0，Opera 12.16和Chrome 36.0.1985.125m。唯一的版本，因爲我希望它會在Chrome上運行。在其他瀏覽器中，在漸隱效果之前，該圓圈是可見的。我曾嘗試設置不透明度：0;然而，最初在ID #test上，在淡入淡出效果運行後，它返回到不透明度：0;狀態，我希望它保持不透明狀態：1;任何建議我如何實現這一目標？理想情況下，我想保留在CSS3而不是Javascript。 –

感謝您的幫助球員，但我知道了，因爲我需要使用CSS3工作。

我需要做的就是在動畫設置後將以下CSS添加到我的#test ID中。

-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards; 
-o-animation-fill-mode:forwards; 
-ms-animation-fill-mode:forwards; 
animation-fill-mode:forwards;

更新的jsfiddle http://jsfiddle.net/Aq4nK/4/

來源

2014-07-18 13:10:26

你可以通過一些腳本實現這一點。

CSS

 
#targetElement { 
    background-color:#000; 
    opacity: 0; 
    transition: 1s; 
} 
#targetElement.opaque { opacity:1; transition:1s; }

HTML


    <p id="targetElement">Lorem</p>

jQuery的

 
    $('#targetElement').addClass('opaque');

您元素默認情況下不透明度爲：0。在頁面加載時，您爲其指定一個類，使其具有不透明度：1，並且其轉換設置爲品味。您可以使用所有元素或者包含或覆蓋其他元素的元素來做到這一點。

http://jsfiddle.net/mqxz8/

來源

2014-07-17 18:24:56

CSS3 - 淡入淡出效果

回答

相關問題