CSS的不透明度更改與時間延遲div用戶交互

我試圖設置一個圖像內的緩慢出現（不透明度從0到1）在5秒以上的股利。我有這個代碼：CSS的不透明度更改與時間延遲div用戶交互

.fadeDivIn { 
opacity: 1; 
transition: opacity 5s ease-in; 
-moz-transition: opacity 5s ease-in; 
-webkit-transition: opacity 5s ease-in; 
-o-transition: opacity 5s ease-in; 
}

但我不知道如何自動觸發它。

我一直在做轉換到其他元素與CSS3關鍵幀，並希望喜歡應用類似於不透明的東西，但已擊中磚牆。任何人都可以幫忙嗎？

來源

2014-04-20 user2840467

https://developer.mozilla.org/en-US/docs/Web/CSS/animation –

看一看下面的例子，你需要使用關鍵幀

div { 
    background: #333; 
    width: 200px; 
    height: 200px; 
    -webkit-animation: smooth 5s ease-in; 
    -moz-animation: smooth 5s ease-in; 
    -o-animation: smooth 5s ease-in; 
    -ms-animation: smooth 5s ease-in; 
    animation: smooth 5s ease-in; 
} 

@-webkit-keyframes smooth { 
    0% { opacity: 0;} 
    100% { opacity: 1;} 
}

一個例子：http://jsfiddle.net/zxx8u/1/

來源

2014-04-20 09:27:50

感謝srekoble - 這很理想！我爲動畫添加了10秒，以便延遲發射： -moz-animation：平滑5秒緩解10秒; -o-animation：平滑5秒緩解10秒; -ms-animation：平滑5秒緩解10秒; 動畫：平滑5秒緩解10秒; – user2840467

http://jsfiddle.net/DerekL/9PfMF/

div{ 
    -webkit-animation: fadein 5s linear 1 normal forwards; 
} 

@-webkit-keyframes fadein{ 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

來源

2014-04-20 09:28:17

-1

您可以用簡單的CSS3關鍵幀動畫做

demo

<div class="timedelay"></div> 

.timedelay { 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    background-color: red; 
    -webkit-animation: myanim 5s ease 5s; 
} 

@-webkit-keyframes myanim { 
    0% { 
    opacity: 0; 
    } 

    100% { 
    opacity: 1; 
    } 
}

來源

2014-04-20 09:30:27

爲什麼減去投票？ –

不是來自我 - 而是因爲問題是關於改變不透明度而不是保證金。 – user2840467

您可以使用jQuery animate代替，非常乾淨，易於操作。

JSFiddle link

<div style="opacity:0;">some text</div> 
$("div").animate({opacity: '1'}, 5000);

來源

2015-10-16 13:39:59 LiranBo

類似的東西爲我的作品：

.chat-messages li{ 
    -webkit-animation: fadein 5s linear 1 normal forwards; 
} 

@-webkit-keyframes fadein{ 
    0% { opacity: 1;} 
    90% { opacity: 1;} 
    100% { opacity: 0;} 
}

來源

2015-11-16 16:33:39 user1382572

CSS的不透明度更改與時間延遲div用戶交互

回答

相關問題