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

css solution to hide div after x amount of seconds

提问by MShack

Any way using css3 only to remove/hide the #a after say 90 seconds of page load ?

有没有办法只在页面加载 90 秒后使用 css3 删除/隐藏 #a ？

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

i would love to go from display:block to display:none if possible ?

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

回答by misterManSam

This is possible with CSS animation and the forwardsproperty to pause the animation at 100%. The displayproperty cannot be animated.

这可以通过 CSS 动画和forwards100% 暂停动画的属性实现。该display属性不能动画。

The element is given position: relativeand then opacity: 0and left: -9999pxwhen it reaches 100%. It will fade and then pull itself outside the viewport.

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

See browser support here- Compatible IE 10+ !

在此处查看浏览器支持- 兼容 IE 10+！

Here is a complete list of animated properties.

这是动画属性的完整列表。

Here are three ways to pull the div outside of the viewport at 100%:

以下是将 div 100% 拉出视口的三种方法：

1. left: -9999pxcombined with position: relativeon the element (Like in the example below)

2. height: 0or max-height: 0combined with text-indent: -9999px

3. This example with border-widthfrom @Troy Gizzi

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

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

3. 这个例子来自@Troy Gizzi 的边框宽度

Example

例子

This example fades the text after 5 seconds and then removes the div from the viewport.

此示例在 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>

回答by D. R.

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

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

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

回答by Muhammad Umer

Closest you can come with css only is this..it might be improved further but this as it's..

您可以使用 css 来的最接近的是这个..它可能会进一步改进，但是因为它是..

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

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;}
}

And if you wanted to do with javascript/jquery..

如果你想使用 javascript/jquery ..

you would do this..

你会这样做..

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