首页  >  文章  >  web前端  >  CSS 过渡或动画能否在 5 秒后自动隐藏元素?

CSS 过渡或动画能否在 5 秒后自动隐藏元素?

Patricia Arquette
Patricia Arquette原创
2024-11-08 08:36:02464浏览

Can CSS Transitions or Animations Auto Hide Elements After 5 Seconds?

CSS 5秒后自动隐藏元素

问题来了:页面加载后五秒隐藏元素是否可行? jQuery 解决方案是已知的,但其目的是使用 CSS 转换来复制它。是否可能,或者超出 CSS 过渡/动画的能力?

答案

答案是肯定的!但是,它无法以预期的方式完成,因为不可能对通常用于隐藏元素的属性进行动画或转换(例如显示或更改尺寸以及设置为溢出:隐藏)。

相反,动画是为相关元素创建的。五秒后,可见性:隐藏;被切换,同时高度和宽度设置为零,以防止元素占用 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 过渡或动画能否在 5 秒后自动隐藏元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn