但是您不能以您可能立即想到的方式执行此操作，因为您无法为您所依赖的属性设置动画或创建转换(例如显示或更改维度并设置为溢出：隐藏)，以便正确隐藏元素并阻止它占用可见空间。

因此，为所涉及的元素创建动画，只需简单地切换可见性：hidden; 5秒后，同时将高度和宽度设置为零，以防止元素仍占据DOM流中的空间。

FIDDLE

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>