CSS自动隐藏5秒后的元素

Question

是否可以在页面加载后5秒隐藏元素？我知道有一个jQuery解决方案.

我想做同样的事情,但希望通过CSS过渡获得相同的结果.

任何创新的想法？或者我是否超出了css过渡/动画的限制？

Answer 1

是!

但你不能以你可能立刻想到的方式去做,因为你无法动画或围绕你原本依赖的属性创建一个过渡(例如display,或改变尺寸和设置overflow:hidden)以正确隐藏元素和防止它占用可见空间.

因此,为相关元素创建动画,并visibility:hidden;在5秒后切换,同时还将高度和宽度设置为零,以防止元素仍然占用DOM流中的空间.

小提琴

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>

Answer 2

根据@ SW4的答案，您还可以在末尾添加一些动画。

body > div{
    border:1px solid grey;
}
html, body, #container {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container {
    overflow:hidden;
    position:relative;
}
#hideMe {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>

剩下的0.5秒使不透明度属性动起来。如果要更改长度，只需确保进行数学计算，在这种情况下，5秒的90％会使我们剩下0.5秒来设置不透明度的动画。

Answer 3

当然你可以,只是setTimeout用来改变一个类或什么来触发过渡.

HTML:

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

CSS:

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

JS在加载或DOMContentReady上运行:

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

这里举例说明.