延迟 CSS3 模态 window 淡入

Question

我有一个模式 window，我试图在大约 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;

一共(shorthand):

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>

延迟 CSS3 模态 window 淡入

Delayed CSS3 modal window fade in

css

css-animations