html 怎么几秒后自动隐藏,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

Wait for it...

2020-05-16