问题来了:页面加载后五秒隐藏元素是否可行? 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中文网其他相关文章!