仅使用 CSS 可以在 5 秒后隐藏元素吗？

CSS 在 5 秒后自动隐藏元素

您可以使用 CSS 在页面加载后 5 秒隐藏元素吗？ jQuery 解决方案当然是可行的，但是可以使用 CSS 转换来实现这一点吗？

答案：是的

但是，有一个转折。 CSS 过渡不能应用于“显示”或尺寸等属性以实现真正的隐藏。相反，为该元素创建一个动画，并在 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>

这种方法使用 CSS 过渡来实现所需的结果，隐藏元素在指定的延迟后不影响页面的流程。

以上是仅使用 CSS 可以在 5 秒后隐藏元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！