html - 为什么这个动画不起作用？

Question

我希望这个 div 容器隐藏(显示:无)2 秒。

或者如果您有更好的解决方案，请发布:)但请不要使用 jquery 或 javascript

#vcontainer {
  height: 450px;
  width: 100%;
  background-color:black;
  margin-top:10px;
  margin-bottom:10px;
  animation: vldng 4s;
  -webkit-animation: vldng 4s;
  display: none;
}

@keyframes vldng {
  0%{display: none;}
  50%{display: block;}
  100%{display: block;}
}

@-webkit-keyframes vldng {
  0%{display: none;}
  50%{display: block;}
  100%{display:block;}
}

希望你能帮帮我! :)

Answer 1

您可以使用Opacity代替display。
但是 opacity=0 不同于 display=none,
在这两种状态下你什么都看不到。
opacity:0 使您的元素充当占位符，但 display:none 将您的元素从视口(viewport)中移除。