在 x 秒后隐藏 div 的 css 解决方案

Question

在页面加载 90 秒后使用 css3 仅删除/隐藏 #a 的任何方法？

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

如果可能的话，我想从 display:block 转到 display:none 吗？

Answer 1

这可以通过 CSS 动画和 forwards 属性在 100% 处暂停动画来实现。 display 属性无法设置动画。

元素被赋予 position: relative ，然后 opacity: 0 和 left: -9999px 当它达到 100% 时。它会褪色，然后将自己拉出视口(viewport)。

See browser support here - 兼容 IE 10+!

Here is a complete list of animated properties.

以下是三种将 div 以 100% 拉出视口(viewport)的方法:

1. left: -9999px 与元素上的 position: relative 组合(如下例所示)

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

3. This example with border-width来自 @Troy Gizzi

例子

此示例在 5 秒后淡化文本，然后从视口(viewport)中删除 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>