如何在CSS中將元素隱藏一段時間？

Question

我需要隱藏一個按鈕10分鐘。我可以用CSS做這個嗎？

我確實知道CSS有點不太好。我想我可以開始這個代碼，但在此之後，我不知道該怎麼做：

#button { 
     animation:delay; 
} 

Answer 1

JavaScript方式

你反對通過JavaScript處理呢？

這將是相當瑣碎使用setTimeout()函數假設它已經被隱藏的事：

<!-- Your initially hidden button --> 
<button id='button' style='display: none;'>Click me!</button> 
<!-- Your script to display your button after 10 minutes --> 
<script> 
    // setTimeout will trigger a function after a specified delay (in milliseconds) 
    setTimeout(function(){ 
     // When your timeout has finished, find your button and show it 
     document.getElementById('button').style.display = 'block'; 
    }, 10 * 6000); 
</script> 

您可以see a working example of this here及以下使用5秒的延遲證明：

純CSS方法

您可以通過類似於您的初始後表現出的理念適當延遲一起創建CSS animation做到這一點：

#button { 
    /* Initial value (hidden through opacity) */ 
    opacity: 0; 
    /* Various cross-browser declarations for your animation */ 
    -webkit-animation: delayedShow 0.1s forwards; 
    -moz-animation: delayedShow 0.1s forwards; 
    -ms-animation: delayedShow 0.1s forwards; 
    -o-animation: delayedShow 0.1s forwards; 
    animation: delayedShow 0.1s forwards; 
    /* Your delay (in this case 600 seconds) */ 
    animation-delay: 600s; 
} 
/* Your animation declaration (transitions from opacity of 0 to 1) */ 
@keyframes delayedShow { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

它使用opacity屬性來隱藏和隱藏0過渡的元素顯示經過10分鐘（600秒）的延遲後，延遲時間爲1。此外，forwards屬性將確保您的轉換的最終值在動畫完成後仍然存在。

您可以see an example of this in action here及以下證明，以及：

值得注意

由於這兩種方法都是純粹的客戶端代碼，他們需要的頁面無法刷新或在這段時間內回覆，因爲它會重置您的計時器。如果這不適合您的需要，您可能需要使用一些服務器端方法來確定「計時器」何時完成，然後以這種方式顯示按鈕。

Answer 2

您是否嘗試添加延遲時間？

animation-delay: 10s;