CSS解决方案：在x秒后隐藏div

Question

有没有仅使用 CSS3 的方法，在页面加载后约 90 秒钟自动移除/隐藏 #a？

<div id="container">
  <div class="box">
    <a id="hide_after_90_seconds"></a>
  </div>
</div>

如果可能的话，我希望可以从display:block更改为display:none？

- MShack

---

听起来更像是 JavaScript 的工作... 可能有一个丑陋的解决方法，使用transition-delay，但我无法看到如何使其起作用。 - Brewal

Answer 1

这可以通过CSS动画和“forwards”属性实现，以在100％处暂停动画。 “display”属性无法进行动画处理。

当元素达到100％时，将给出“position：relative”，然后是“opacity：0”和“left：-9999px”。它将淡出，然后将自己拉出视口。 请参见此处的浏览器支持情况 - 兼容IE 10+！ 这是完整的动画属性列表。 以下是将div在100％时从视口外拉出的三种方法：

1. 使用position: relative和left: -9999px结合在元素上（就像下面的示例一样）

2. 使用height: 0或max-height: 0结合text-indent: -9999px

3. 这个例子使用了边框宽度，出自@Troy Gizzi

示例

此示例在5秒后淡化文本，然后将div从视口中移除。

div {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
  background: red;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}

<div>hide me after 5 seconds</div>

- misterManSam

---

需要注意的是，CSS3动画不支持在display: block和display: none之间进行缓动。如果OP真的必须采用这种方法，那么JavaScript是唯一的解决方案。 - Terry

left:-9999px没有移除div，它仍然占据页面上的空间 :( - MShack

只是为了好玩：一个仅使用CSS的倒计时！:-D ...但是，当缩放到90秒而不仅仅是3秒时，它变得非常丑陋... - Troy Gizzi

我通过使用max-height:500并在关键帧中设置为max-height:0来使其正常工作。谢谢大家！ - MShack

这里提供了另一种去除空白间隙的方法，使用border-width-bottom: http://jsfiddle.net/troygizzi/2d4ar7jr/ -- 但在IE中似乎有点不稳定；它只有在我点击运行后才能正常工作，而在页面首次加载时无法正常工作。不确定这是否只是JSFiddle的问题或其他原因... - Troy Gizzi

Answer 2

#hidethis { animation: css 0s 3s forwards; }

@keyframes css  { to { visibility: hidden; } }
                    /* visibility / overflow: hidden; */

<div id='hidethis'>Wait for 3 seconds...</div>

- Darshan Rathod

Answer 3

最接近只使用CSS的方法是这样的...它可能还可以进一步改进，但目前就是这样。

http://jsfiddle.net/techsin/7g7ofazj/

.red {
    background-color: red; width: 100px; height: 100px;
    -webkit-animation: ani 1s forwards;
}

@-webkit-keyframes ani {
    89%  {opacity:1;height: 100px;}
    90%  {opacity:0; height: 0;}
    100%  {opacity:0; height: 0;}
}

如果你想使用JavaScript/jQuery实现，你可以这样做：

代码如下：

var ele = $(".hide_after_90_seconds");
setTimeout(function() { ele.hide(); }, 9000);

- Muhammad Umer

---

对于时间，您确定是 90000 吗？900 只有 0.9 秒 :) - Terry

您分享的URL http://jsfiddle.net/techsin/7g7ofazj/ 显示错误“404该页面不存在。” 请在此处更新或删除它。 - Kamlesh

不，这就是URL的本质。它们会随着时间的推移被删除，这就是为什么SO要求在答案中放置代码的原因，就像我所做的那样。我不确定为什么要更新7年前的答案。 - Muhammad Umer