CSS解决方案在x秒后隐藏div [英] css solution to hide div after x amount of seconds

问题描述

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

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

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

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

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

推荐答案

使用CSS动画和forwards属性可以将动画暂停100％. display属性不能设置动画.

This is possible with CSS animation and the forwards property to pause the animation at 100%. The display property cannot be animated.

为元素赋予position: relative，然后在元素达到100％时被赋予opacity: 0和left: -9999px.它将消失，然后将其自身拉到视口之外.

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

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

See browser support here - Compatible IE 10+ !

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

以下三种将div以100％的比例拉出视口的方法:

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

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

1. left: -9999px combined with position: relative on the element (Like in the example below)

height: 0或max-height: 0与text-indent: -9999px

具有边框宽度的示例来自@Troy Gizzi

示例

此示例在5秒钟后淡出文本，然后从视口中删除div.

Example

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

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>

这篇关于CSS解决方案在x秒后隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！