淡出，暂停，然后淡入元素 - 仅限 CSS

Question

我正在尝试淡出一个元素，保持该元素淡出 5 秒，然后淡入该元素。我试图仅使用 CSS 而不是 jQuery 来实现这一点。

目前我已经设置了两个元素在 2 秒后开始淡入淡出，淡入淡出持续时间为 2 秒，然后在持续时间结束后立即重新出现。

这是一个小提琴。

和代码：

CSS：

.hideMe1{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2s; /* Pause before fade */
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

.hideMe2{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2.5s; /* Pause before fade */
    -webkit-animation-delay:3s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

@keyframes hideMe{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes hideMe{
    from {opacity :1;}
    to {opacity :0;}
}

HTML：

<div class="hideMe1">
I'll fade first
</div>
<div class="hideMe2">
My turn to fade
</div>

如何让每个元素在重新出现之前保持淡化 5 秒（例如）？

Answer 1

为了实现这种效果，您必须像下面的代码片段一样修改关键帧。

• 设置animation-duration为淡出 + 暂停 + 淡入的总时间。在这里，我将持续时间设置为 10 秒（2.5 秒淡出 + 5 秒暂停 + 2.5 秒淡入）。
• 设置关键帧百分比以匹配预期的持续时间，如下所示：
  • 在25%标记（这不过是2.5s的10s）改变opacity从1到0。
  • 一个5s暂停期也不过是50%的10s，所以一定元素保持其状态，直到75%标志。关键75%帧也被添加（即使元素保持在状态中），否则元素将从25%标记本身开始淡入。
  • 从75%标记开始，使元素opacity从0到逐渐变化1，从而产生淡入效果。

注意：我删除了属性的供应商前缀版本以保持演示简单，并且我还删除了animation-fill-mode和的重复声明，-webkit-animation-fill-mode因为在任何时候浏览器都只会使用一个。Webkit 浏览器会使用最后出现的带前缀的，而其他浏览器会使用不带前缀的（因此会导致跨浏览器差异）。

.hideMe1 {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.hideMe2 {
  animation: hideMe 10s 1;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
}
@keyframes hideMe {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="hideMe1">
  I'll fade first
</div>
<div class="hideMe2">
  My turn to fade
</div>