淡出，暂停，然后淡入一个元素-仅CSS [英] Fade out, pause, then fade in an element - CSS Only

问题描述

我正在尝试淡出某个元素，让该元素淡出5秒钟，然后在该元素中淡出。我正在尝试仅使用CSS而不使用jQuery来实现这一目标。

I am trying to fade out an element, keep that element faded out for, say, 5 seconds, then fade back in the element. I am trying to achieve this using only CSS and not jQuery.

当前，我设置了两个元素，以便在2秒后开始褪色，并具有2秒的淡入时间，然后持续时间一结束，便会重新出现。

Currently I have set two elements to start fading after 2 seconds, have a fade duration of 2 seconds and then reappear as soon as the duration ends.

这里是一个小提琴。

和代码：

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秒钟（例如）？ p>

How can I make each element stay faded for 5 seconds (for example), before reappearing?

推荐答案

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

For achieving that effect, you would have to modify your keyframes like in the below snippet.

• 设置动画持续时间，使其成为淡出+暂停+淡入的总时间。在这里，我将持续时间设置为10s（淡出2.5s +暂停5s +淡入2.5s）。


• 设置关键帧百分比以匹配预期的持续时间，如下所示：
  
  
  
  
  • 达到 25％标记（除了 2.5s 10s 的code>更改了 1 不透明度 c>到 0 。
  

  • A 5s 暂停时间不过是<$ c的 50％ $ c> 10s ，因此使元素保持其状态直到 75％标记。至关重要的是，还必须添加 75％关键帧（即使该元素保持状态），因为否则该元素将从 25％本身。
  
  
  • 从 75％标记开始，使元素的 opacity 从 0 逐渐更改为 1 ，从而产生淡入效果。
  
  
  • Set the animation-duration such that it is the total time for the fade-out + pause + fade-in. Here I have set the duration as 10s (2.5s for fade-out + 5s pause + 2.5s for fade-in).
  • Set the keyframe percentages to match the expected durations like below:
    • At 25% mark (which is nothing but 2.5s of 10s) change the opacity from 1 to 0.
    • A 5s pause period is nothing but 50% of 10s and so make the element hold its state till the 75% mark. It is critical that the 75% keyframe is also added (even though the element stays in the state) because otherwise the element would start fading-in from the 25% mark itself.
    • Starting at the 75% mark, make the element's opacity change gradually from 0 to 1 and thereby producing the fade-in effect.

    注意：我已删除了为了简化演示，使用属性的供应商前缀版本，并且我还删除了 animation-fill-mode 和 -webkit- animation-fill-mode ，因为在任何时候，浏览器只会使用一个。 Webkit浏览器将使用最后一个前缀的前缀，而其他浏览器将使用未前缀的前缀（因此会导致跨浏览器的差异）。

    Note: I have removed the vendor-prefixed versions of the properties to keep the demo simple and I've also removed the repetitive declaration of animation-fill-mode and -webkit-animation-fill-mode as at any point of time only one would be used by a browser. Webkit browsers would use the prefixed one as it appears last whereas other browsers would use the unprefixed one (and thus would result in cross-browser differences).

    .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>

    这篇关于淡出，暂停，然后淡入一个元素-仅CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！