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

问题描述

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

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

有什么创新的想法吗?还是我问的超出了 css 过渡/动画的限制?

解决方案

YES！

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

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

FIDDLE

CSS

html, body {高度:100%；宽度:100%；保证金:0;填充:0;}#隐藏我{-moz-animation: cssAnimation 0s 缓入 5s 转发；/* 火狐 */-webkit-animation: cssAnimation 0s 缓入 5s 转发；/* Safari 和 Chrome */-o-animation: cssAnimation 0s 缓入 5s 转发；/* 歌剧 */动画:cssAnimation 0s 缓入 5s 前进；-webkit-animation-fill-mode:转发；动画填充模式:向前；}@keyframes cssAnimation {到 {宽度:0；高度:0；溢出:隐藏；}}@-webkit-keyframes cssAnimation {到 {宽度:0；高度:0；可见性:隐藏；}}

HTML

等等...

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

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

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

解决方案

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.

Therefore, create an animation for the elements in question, and 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.

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>

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