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;        -webkit-animation: cssAnimation 0s ease-in 5s forwards;        -o-animation: cssAnimation 0s ease-in 5s forwards;        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>