CSS 在 5 秒后自动隐藏元素

Question

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

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

有什么创新点子吗？还是我的要求超出了 css 过渡/动画的限制？

Answer 1

是的!

但是您不能按照您可能立即想到的方式来做，因为您不能围绕您原本依赖的属性(例如 display，或更改尺寸和设置为 overflow:hidden) 以正确隐藏元素并防止其占用可见空间。

因此，为相关元素创建一个动画，并在 5 秒后简单地切换 visibility:hidden;，同时将高度和宽度设置为零以防止元素仍然占据空间DOM 流。

FIDDLE

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>