如何在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;