可以在页面加载5秒后隐藏元素吗？
我知道有 a jQuery solution。
我知道有 a jQuery solution。
我想做同样的事情，但希望通过CSS转换获得相同的结果。@H_404_4@
任何创新想法？还是要求超越css转换/动画的限制？@H_404_4@
解决方法
是！
但是您不能以您可能立即想到的方式执行此操作，因为您无法为您所依赖的属性设置动画或创建转换(例如显示或更改维度并设置为溢出：隐藏)，以便正确隐藏元素并阻止它占用可见空间。@H_404_4@
因此，为所涉及的元素创建动画，只需简单地切换可见性：hidden; 5秒后，同时将高度和宽度设置为零，以防止元素仍占据DOM流中的空间。@H_404_4@
CSS@H_404_4@
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@H_404_4@
<div id='hideMe'>Wait for it...</div>
