title: Staggered fade-in divs from 0 opacity
body: <p>I have three divs I fade in based on a waypoint on the page. I am trying to stagger these divs. The issue I'm having is because I am fading them in from opacity: 0, once the 'animated' class is added, all the divs display (and then the delayed divs will play their animation from opacity: 1). This is probably a stupid question but I can't think of a way to delay the opacity on the 2nd and 3rd divs without having to give them individual animated classes. Any help would be much appreciated!</p>
  
  <pre><code>.project {
    opacity: 0;
  }
  
  .project.animated {
    opacity: 1;
    animation-name: fadeInDown;
    animation-duration: 1s;
  
    &amp;:nth-child(2) {
      animation-delay: .3s;
    }
    &amp;:nth-child(3) {
      animation-delay: .6s;
    }
  }
  
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, -40%, 0);
    }
  
    to {
      opacity: 1;
      transform: none;
    }
  }
  </code></pre>
  
  <p><strong>Compiled CSS:</strong></p>
  
  <pre><code>.project {
    opacity: 0;
  }
  .project.animated {
    opacity: 1;
    animation-name: fadeInDown;
    animation-duration: 1s;
  }
  .project.animated:nth-child(2) {
    animation-delay: .3s;
  }
  .project.animated:nth-child(3) {
    animation-delay: .6s;
  }
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate3d(0, -40%, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  </code></pre>