Question

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

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

我很想从display：block to display：none如果可能的话？

Answer 1

CSS动画和forwards属性可以将动画暂停到100％。 <{1}}属性无法设置动画。

当元素达到100％时，元素会被display，然后position: relative和opacity: 0。它会褪色，然后将自己拉到视口之外。

See browser support here - 兼容IE 10+！

Here is a complete list of animated properties.

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

left: -9999px与元素left: -9999px结合使用（如下例所示）
position: relative或height: 0结合max-height: 0

This example with border-width

@Troy Gizzi

实施例

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

text-indent: -9999px

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

Answer 2

＆＃13;

#hidethis { animation: css 0s 3s forwards; }

@keyframes css  { to { visibility: hidden; } }
                    /* visibility / overflow: hidden; */

＆＃13;

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

＆＃13;

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

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

3 个答案:

实施例