在CSS中隱藏Div容器

我想在使用CSS3一定時間後隱藏DIV。到目前爲止，我有一些jQuery代碼在7秒後隱藏了div。有沒有可能在CSS中做到這一點？在CSS中隱藏Div容器

2012-12-17 James

請發表您的代碼中的問題。 – jrummell

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    div 
    { 
    width:100px; 
    height:100px; 
    background:red; 
    animation:myfirst 7s; /* IE 10+ */ 
    -moz-animation:myfirst 7s; /* Firefox */ 
    -webkit-animation:myfirst 7s; /* Safari and Chrome */ 
    -o-animation:myfirst 7s; /* Opera */ 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    } 

    @keyframes myfirst 
    { 
    from {opacity: 1;} 
    99%{opacity: 1;} 
    to {opacity:0;} 
    } 

    @-moz-keyframes myfirst /* Firefox */ 
    { 
    from {opacity: 1;} 
    99%{opacity: 1;} 
    to {opacity:0;} 
    } 

    @-webkit-keyframes myfirst /* Safari and Chrome */ 
    { 
    from {opacity: 1;} 
    99%{opacity: 1;} 
    to {opacity:0;} 
    } 

    @-o-keyframes myfirst /* Opera */ 
    { 
    from {opacity: 1;} 
    99%{opacity: 1;} 
    to {opacity:0;} 
    } 
    </style> 
    </head> 
    <body> 

    <div>hello world</div> 

    </body> 
    </html>

來源

2012-12-17 19:14:25 Evan

IE10 [支持]（http://msdn.microsoft.com/en-us/library/windows/apps/hh453858.aspx）'@keyframes'。 – Sampson

這開始在7秒內馬上消失，我認爲@詹姆斯正在等待7秒，然後迅速淡出。 – MikeM

@JonathanSampson謝謝。我已經解決了我的評論。 – Evan

設置你的關鍵幀，其持續時間，開始前的延遲，並指示它保留其最後的值：

#foo { 
    animation: fademe 1s 7s forwards 
} 

@keyframes fademe { 
    to { opacity: 0 } 
}

筆：http://codepen.io/joe/pen/mkwxi

此代碼示例不包含任何必需的供應商前綴。要按原樣運行，您應該考慮使用無前綴：http://leaverou.github.com/prefixfree/。

來源

2012-12-17 19:23:27 Sampson

使用animation屬性的組合，具體而言，animation-name，animation-duration，animation-iteration-count，animation-delay和animation-fill-mode

您還需要-webkit-，-moz-，-o-和一致性-ms-（雖然IE10我相信沒有作品供應商前綴）每次animation風格

animation-name:bubbly; /* name of keyframe animation (note @keyframe blocks need vendor prefixes also (atm) */ 
animation-duration:0.9s; /* how long the keyframe takes to run */ 
animation-iteration-count:1; /* how many times to run the keyframe */ 
animation-delay:7s; /* how long before the keyframe starts running */ 
animation-fill-mode:forwards; /* which styles to apply once the keyframe is done */

或者在一個animation統計總結EMENT

animation: bubbly 0.9s 7s 1 forwards;

而且關鍵幀

@keyframes bubbly { 
    from {opacity:1;} 
    to {opacity: 0;} 
}

jsfiddle example（與供應商前綴）

來源

2012-12-17 19:42:17 MikeM

在CSS中隱藏Div容器

回答

相關問題