是的!
但你不能做到这一点你可能马上会想到的办法,因为你不能动画或创建周围的特性的过渡否则你依靠(如display,或改变尺寸和设置overflow:hidden)在为了正确隐藏元素并防止它占据可见空间。
因此,请为有问题的元素创建动画,并在5秒钟后简单地切换visibility:hidden;,同时将高度和宽度设置为零,以防止元素仍占用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