Animate one div after another with pure css

Question

<style>
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.card {
  height: 400px;
  width: 100%;
  max-width: 360px;
  margin: 50px 10px 0px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  animation: bounceIn 0.85s linear forwards;
}

I use the code from animated.css to animate my card. I have multiple cards which I would like to animate one after another. Delay for first card would be 0.85s, 0.9s for the seconds, 0.95s for the third and so on. Is there a way to do this in CSS without creating a ton of new classes like an .card_1, .card_2 and so on?

Answer 1

It looks like you are after a stagger animation. Here are two methods of doing this:

Sass Loop

This is the most "costly" in terms of final CSS code, and requires pre-processing. If you don't have too many items, it remains pretty acceptable, and will work on more browsers, if you have to target older ones.

/* Your previous styles… */
.card {
  $initial-delay: .85s;
  $increase-delay: .1s;
  $total-cards: 10; /* Say you have 10 cards, you can change this number */
  
  @for $i from 1 through $total-cards {
    &:nth-child($i) {
      $zero-i: $i - 1; // Make it zero-based
      animation-delay: #{ $initial-delay + $zero-i * $increase-delay };  
    }
  }
}

CSS custom properties

Modern browsers can use css custom properties, also known as CSS variables. By assigning the same values from the Sass example into your markup, you can reach the same result.

<ul class="card-container" style="--t: 10;">
   <li class="card" style="--i: 0;">Card content…</li>
   <li class="card" style="--i: 1;">Card content…</li>
   <li class="card" style="--i: 2;">Card content…</li>
   <!-- And so on… -->
</ul>

/* Your previous styles… */
.card {
  animation-delay: calc(.85s + .1s * var(--i));
}

Less CSS but you will probably need to process your HTML output to append these additional style attributes on each item. Note that the container's assignment of --t is not required here, but I wanted to make sure you could see how each method works.