CSS隱藏元素，5秒鐘後顯示它

我發現這個問題CSS Auto hide elements after 5 seconds

，我需要知道如何做的這個oposite。基本上是：

與元素-page負載隱藏

-Wait5秒

-Show元素

我不是很好的CSS所以任何幫助將是不錯！

#thingtohide { 
    -moz-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Firefox */ 
    -webkit-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Safari and Chrome */ 
    -o-animation: cssAnimation 0s ease-in 5s forwards; 
    /* Opera */ 
    animation: cssAnimation 0s ease-in 5s forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

@keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     overflow:hidden; 
    } 
} 
@-webkit-keyframes cssAnimation { 
    to { 
     width:0; 
     height:0; 
     visibility:hidden; 
    } 
}

來源

2017-10-17 Dylan Grove

這是從字面上端之間換出的屬性和開始狀態的情況下，您鏈接的目標問題。 – TylerH

@MattWeber引入依賴於另一種編程語言的庫並不比使用CSS在5秒後顯示隱藏元素更簡單。 – TylerH

@TylerH根據答案，有一個更好的方法來做相反的事情，另外，我不知道需要改變什麼，我已經玩過它但沒有成功。因此，爲什麼我提出了一個新問題，而不是將舊線程剔除。 –

試試這個簡單的解決方案。

#showMe { 
 
    animation: cssAnimation 0s 5s forwards; 
 
    visibility: hidden; 
 
} 
 

 
@keyframes cssAnimation { 
 
    to { visibility: visible; } 
 
}

<div id='showMe'>Wait for it...</div>

您還可以使用不透明insted的知名度

#showMe { 
 
    animation: cssAnimation 0s 5s forwards; 
 
    opacity: 0; 
 
} 
 

 
@keyframes cssAnimation { 
 
    to { opacity: 1; } 
 
}

<div id='showMe'>Wait for it...</div>

來源

2017-10-17 20:53:46 Jayakrishnan

好建議。謝謝 – Jayakrishnan

這個效果很好！然而，它留下看起來相當難看的開放空間。將可見性更改爲display：none;/display：inline;不起作用。 –

https://jsfiddle.net/jayakrishnancn/opsara9L/2/這是你要求的嗎？。如果是的話，我會更新我的答案 – Jayakrishnan

你可以運行這樣的東西。這將opacity設置爲0，並在幾秒鐘後，它回升到100％。這個選項可以讓你微調你想要它出現的速度，讓你控制元素有多少不透明度，以及在什麼時候它會擁有它。

#showMe { 
 
    opacity: 0; 
 
    -moz-animation: cssAnimation 5s; 
 
    /* Firefox */ 
 
    -webkit-animation: cssAnimation 5s; 
 
    /* Safari and Chrome */ 
 
    -o-animation: cssAnimation 5s; 
 
    /* Opera */ 
 
    animation: cssAnimation 5s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes cssAnimation { 
 
    99% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes cssAnimation { 
 
    99% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
}

<div id='showMe'>Wait for it...</div>

來源

2017-10-17 20:38:53

你可以使用'cssAnimation 0s 5s forwards;'並且在關鍵幀中擺脫99％，它會創建5s的延遲並且沒有動畫時間 – Jayakrishnan

好的調用，我設置答案的方式是允許提問者看到他們可以調整和設置相關的不透明度和時間框架。通過這種方式，他們可以設置不透明度，在2秒內慢慢降低到50％，然後在3日迅速增加到100％......等等等等。 –

CSS隱藏元素，5秒鐘後顯示它

回答

相關問題