您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

CSS在5秒后自动隐藏元素

CSS在5秒后自动隐藏元素

但是您无法以可能立即想到的方式进行操作,因为您无法为原本依赖的属性(例如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>
CSS 2022/1/1 18:24:51 有361人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶