Fade out, pause, then fade in an element - CSS Only

问题

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.

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.

Here's a fiddle.

And the code:

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>

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

回答1:

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

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

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>

回答2:

You'll have to manually use the keyframes to time the animation. Take a look at this:

.hideMe1 {
  animation: hideMe 5s 1;
  -webkit-animation: hideMe 5s 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 5s 1;
  -webkit-animation: hideMe 5s 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 {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

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

@keyframes hideMe{
    0% {opacity :1;}
    10% {opacity :0;}
  90% {opacity: 0;}
  100% {opacity: 1}
}

Then set your animation speed to something like 7s.

来源：https://stackoverflow.com/questions/35870085/fade-out-pause-then-fade-in-an-element-css-only