css - 延迟的 CSS3 模态窗口淡入

Question

我有一个模态窗口，我试图在大约 7 秒后出现，带有一个关闭按钮，以便用户可以根据需要关闭它。当您使用以下代码单击关闭按钮时，我关闭了它:

.tip {
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  -o-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.tip:target {
    opacity:1;
    pointer-events: auto;
}

和 HTML:

<a href="#tip1">Open Modal</a>
<div class="tip" id="tip1">
  Try clicking around a bit.
  <a href="#close" title="Close" class="close">X</a>
</div>

我如何让它在短暂延迟后首次加载页面时自动显示？我尝试使用 CSS 关键帧，但它会在出现后瞬间消失，或者关闭按钮根本不起作用。

Answer 1

您可以使用动画初始值:(这是普通的)

animation-delay: 7s

我已经为您准备了工作示例。我还使用了 animation-fill-mode: forwards，所以在动画结束后，不透明度保持为 1(不等于动画开始前的 0)

animation-fill-mode: forwards;

一共(速记):

animation: myFade 0.5s linear 5s;

地点:

• myFade 是您的动画名称
• 5s 是延迟
• 0.5s 是动画的持续时间
• linear 是计时函数

下面是工作示例:

.tip {
  z-index: 99999;
  opacity: 0;
  animation: myFade 0.5s linear 2s ;
  animation-fill-mode: forwards;
  width: 200px;
  height: 80px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  padding: 20px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  position: absolute;
  margin:20px 30px;  
}
@-webkit-keyframes myFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tip:target {  
  display:none;
}

.btn {
  padding: 7px 8px;
  background: #3786ad;
  font-size:12px;
  font-family: Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  
  
}

<p>After 2 seconds popup would appear. Click [X] to close it.</p>
<br />

<a href="#tip1" class="btn">Open Modal</a>
<div class="tip" id="tip1">
  Try clicking around a bit.
  <a href="#tip1" title="Close" class="close">X</a>
</div>