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

Question

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

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

我很乐意从显示:块到显示:如果可能,没有？

Answer 1

这可以通过CSS动画和forwards属性以100%暂停动画.该display属性无法动画.

的元件被给予position: relative,然后opacity: 0和left: -9999px当它达到100%.它会褪色,然后将自己拉到视口外.

请参阅此处的浏览器支持 - 兼容IE 10+!

以下是动画属性的完整列表.

以下三种方法可以将视口外的div拉到100%:

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

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>

Answer 2

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

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

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