尝试使用 css 隐藏弹出窗口

Question

我一直在寻找答案....但到目前为止我一无所获。有什么方法可以让我仅使用 css.

隐藏我的弹出窗口（例如延迟 4 秒后）

/* Toggle this class - hide and show the popup */
            .popup .show {
              visibility: visible;
              -webkit-animation: fadeIn 3s;
              animation: fadeIn 3s;
            }

在那里我可以使用 css 来展示。但是我尝试了一些操作，例如：.popup .hide 但它没有用。

Answer 1

是的，查看我的代码。我为弹出窗口添加了背景和一些样式，因此可以显示一些内容。

对于动画来说，第1秒是动画的时长，第2秒是延迟4秒。 "forwards" 将允许元素保留或不重置。

.popup {
 background: black;
 width: 100px;
 height: auto;
 padding: 100px;
 animation: fadeIn 3s, fadeOut 3s 4s forwards;
}

@keyframes fadeIn {
  from{opacity: 0%;}
  to{opacity:100%;}
}
@keyframes fadeOut {
  from{opacity: 100%;}
  to{opacity: 0%;}
}

<div class="popup">

</div>

尝试使用 css 隐藏弹出窗口

Trying to hide a popup using css

html

css

popup