CSS在5秒后自动隐藏元素

是否可以在页面加载5秒后隐藏元素？ 我知道有

我想做完全相同的事情，但希望通过CSS转换获得相同的结果

有什么创新的想法吗？还是我的要求超出了css转换/动画的限制？

是的 但是，您不能以您可能立即想到的方式执行此操作，因为您无法围绕您原本依赖的属性（例如，

显示

，或将尺寸和设置更改为

溢出：隐藏

）设置动画或创建过渡，以正确隐藏元素并防止其占用可见空间

因此，为相关元素创建动画，并简单地切换

可见性：隐藏5秒后，同时将高度和宽度设置为零，以防止元素仍然占据DOM流中的空间

CSS

HTML

等待它。。。
当然可以，只需使用
setTimeout
来更改类或触发转换的内容

HTML:

要在加载或DOMContentReady时运行的JS：

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

.
为什么不尝试淡出


$（文档）.ready（函数（）{
$（'plsme'）.fadeOut（5000）；//5秒x1000毫秒=5000毫秒
});

加载。。。请稍候
根据@SW4的答案，您还可以在结尾添加一点动画


body>div{
边框：1px纯灰；
}
html，正文，#容器{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#容器{
溢出：隐藏；
位置：相对位置；
}
#隐藏{
-webkit动画：cssAnimation 5s向前；
动画：cssAnimation 5s向前；
}
@关键帧cssAnimation{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@-webkit关键帧cssAnimation{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}

等等。。。
不错！我正要推荐关键帧+1.为什么不设置不透明度的动画<代码>不透明度：1
到0它可以工作，但我有一个问题，在你的回答中，你只包括@keyframe和@webkit关键帧，我想知道没有-moz和-o是否可以。还有一个问题。我发现它只需等待5秒钟，然后立即隐藏元素，而无需动画。我认为如果你在回答中也包括淡出过渡部分，那就太好了。@弧度-不透明度不会改变元素仍然占据空间的事实…只是不可见（）-你可以看到灰色边框的div在5sBrilliant之后不会在内容上塌陷！谢谢你，先生！这是可能的，但我不建议这样做。使用jQuery或纯JS。举个例子：我知道已经有答案了，但我也这么做了，孩子们把我带走了一段时间：）感谢@balexandre，+1的评论。谢谢你的回答，但我只是不想使用javascript。如果我希望使用javascript或jQuery，我可以使用我在问题中包含的jQuery解决方案。无论如何，谢谢。请记住这一点。您要求提供一个不使用jQuery内置转换的解决方案，我用纯CSS转换和一行通用Javascript为您提供了答案。你从未要求一个没有JS的解决方案，因此答案是完整的。@NielsKeurentjes这就像有人说没有java，然后你给了他们一个GWT解决方案。或者有人说没有css，而你给出了一个sass解决方案。问题上的标记是css，而不是javascript或jquery。Jquery是javascript的同义词，因为它是围绕它的一个框架。@snowe2010不完全如此。SASS意味着安装一个编译器。GWT意味着包括一个额外的库。jQuery意味着安装和加载一个额外的库。因此，我假设问题是如何仅使用普通浏览器中可用的方法来实现预期的结果，这可以归结为CSS和普通Javascript。在这两个解决方案中，最直接、最不老套的一个就是这个答案。被接受的答案很好，但我没有这个干净。意见不同，答案本身并没有错。@NielsKeurentjes是的，只是他明确表示他知道有一个jquery解决方案，他想要一个css解决方案。如果他知道有一个jquery解决方案，那么显然有一个javascript解决方案，因为jquery只是一个使javascript更容易的库。问题是关于使用CSS，而不是javascript！我喜欢这个解决方案。有没有一种方法可以将它组合起来，使其淡出，然后从DOM中删除？如果要从DOM中删除它，需要使用一些JavaScript。如果您的意思是从文档流中明显地删除它，那么您可以使用上面提到的设置
高度：0
和
宽度：0
-但是，它附带了一些警告，因为在将高度从0更改为100%等时，它可能会导致跳跃效果，同时也可以使用键盘保持项目的焦点。
<div id='hideMe'>Wait for it...</div>

<p id="aap">OHAI!</p>

p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);