CSS 5秒后自动隐藏元素 [英] CSS Auto hide elements after 5 seconds

问题描述

网页载入后5秒可以隐藏元素吗？
我知道有一个jQuery解决方案。

Is it possible to hide element 5 seconds after the page load? I know there is a jQuery solution.

我想做同样的事情，但希望能够通过CSS转换得到相同的结果。

I want to do exactly same thing, but hoping to get the same result with CSS transition.

任何创新的想法？或者我超越css转换/动画的限制？

Any innovative idea? Or am I asking beyond the limit of css transition/animation?

推荐答案

是！ >

但是你不能以你可能立刻想的方式做，因为你不能动画或者创建一个过渡，你将不得不依赖的属性（例如 display ，或更改维度并将其设置为 overflow：hidden ），以便正确隐藏元素并防止占用可见空间。

YES!

But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.

因此，为相关元素创建一个动画，只需在5秒后切换 visibility：hidden; ，同时还将高度和宽度设置为零，以防止元素仍占用DOM流中的空间。

Therefore, create an animation for the elements in question, and simply simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.

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>

这篇关于CSS 5秒后自动隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！