Display Divs One by One with CSS Animation

Question

In my product, I am displaying a loading message as the user waiting for the action to finish. To keep them waiting, we are displaying did you know facts to keep them occupied while they wait.

Initially, I had set up the messages to work with jQuery but need to convert this functionality into CSS only.

<span class="quotes">Message 1</span>
<span class="quotes">Message 2</span>
<span class="quotes">Message 3</span>
<span class="quotes">Message 4</span>
<span class="quotes">Message 5</span>
<span class="quotes">Message 6</span>
<span class="quotes">Message 7</span>
...
<span class="quotes">Message 12</span>

<script>
(function() {

var quotes = $(".quotes");
var quoteIndex = -1;

function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(5000)
.fadeOut(2000, showNextQuote);
}

showNextQuote();

})();</script>

This code allows the messages to appear one by one and have a fadeIn and fadeOut animation before each one.

question from:https://stackoverflow.com/questions/65849610/display-divs-one-by-one-with-css-animation

Answer 1

We can give each of the quote elements the same animation, fading in, showing and fading out then remaining faded out while the other elements show in turn. We just get them to start their animations at staggered times.

Here is a snippet to show the idea. Obviously some recalculation is needed if the number of quotes or the time intervals required change. Theoretically most of this could be done using CSS variables but it does not seem possible to use CSS calc to specify %s in keyframes currently.

/* One day we may be able to use CSS variables for the animation's % calculations
   For now we calculate them in advance from:
    numquotes = 12
    fadingin = 2s;
    showing = 5s;
    fadingout = 2s;
    duration = (fadingin + showing + fadingout) * numquotes
*/
.quoteswrapper {
  position: relative;
}
.quotes {
  position: absolute;
  opacity: 0;
  animation-name: fadeinout;
  animation-duration: 108s;     /* = (fadingin + showing + fadingout) * numquotes */
  animation-iteration-count: infinite;
}

@keyframes fadeinout {
  0% {
    opacity: 0;
  }
 1.85% {                      /* = fadingin / duration * 100% */
    opacity: 1;
  }
  4.63% {                     /* = (fadingin + showing) / duration * 100% */
    opacity: 1;
  }
  6.48% {                     /* = (fadingin + showing + fadingout) / duration * 100% */
    opacity: 0;
  }
 100% {
    opacity: 0;
  }
}

.quotes:nth-child(1) { animation-delay: 0s; }  /* delay = (n-1) / numquotes * duration */
.quotes:nth-child(2) { animation-delay: 9s; }
.quotes:nth-child(3) { animation-delay: 18s; }
.quotes:nth-child(4) { animation-delay: 27s; }
.quotes:nth-child(5) { animation-delay: 36s }
.quotes:nth-child(6) { animation-delay: 45s; }
.quotes:nth-child(7) { animation-delay: 54s; }
.quotes:nth-child(8) { animation-delay: 63s; }
.quotes:nth-child(9) { animation-delay: 72s; }
.quotes:nth-child(10) { animation-delay: 81s; }
.quotes:nth-child(11) { animation-delay: 90s; }
.quotes:nth-child(12) { animation-delay: 99s; }

<div class="quoteswrapper">
  <span class="quotes">Message 1</span>
  <span class="quotes">Message 2</span>
  <span class="quotes">Message 3</span>
  <span class="quotes">Message 4</span>
  <span class="quotes">Message 5</span>
  <span class="quotes">Message 6</span>
  <span class="quotes">Message 7</span>
  <span class="quotes">Message 8</span>
  <span class="quotes">Message 9</span>
  <span class="quotes">Message 10</span>
  <span class="quotes">Message 11</span>
  <span class="quotes">Message 12</span>
</div>