但是您无法以可能立即想到的方式进行操作,因为您无法为原本依赖的属性(例如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
<div id='hideMe'>Wait for it...</div>