如何在一段时间内用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属性在延迟10分钟（600秒）后隐藏并将元素从隐藏的0转换为显示1。此外，forwards属性将确保在动画完成后转换的结束值仍然存在。

你可以see an example of this in action here并在下面演示：

值得注意

由于这两种方法都是纯粹的客户端代码，因此它们要求在此期间不刷新或回发页面，因为它会重置计时器。如果这不能满足您的需求，您可能需要使用一些服务器端方法来确定“计时器”何时完成，然后以这种方式显示您的按钮。

Answer 2

您是否尝试添加延迟时间？

animation-delay: 10s;