An SCSS mixin to sequence the transitions of a known number of elements

cascade.scss

// Cascade
// $count accepts any whole number > 1
// $delay & $duration accept values in seconds
// NB you'll need to handle vendor prefixes yourself
// --------------------------
@mixin cascade($count, $property, $delay: 0s, $duration: 0.2s, $timing: ease) {
  transition-property: $property;
  transition-timing-function: $timing;
  @for $i from 1 through $count {
    &:nth-child(#{$i}) {
      transition-delay: $delay + (($i - 1) / 100);
      transition-duration: $duration + (($i - 1) / 100);
    }
  }
}

example.html

<!-- Toggle the 'torrential' class on the <ul> -->
<ul class="torrential">
  <li>Crash</li>
  <li>Whoosh</li>
  <li>Tumble</li>
  <li>Swish</li>
  <li>Riffle</li>
  <li>Sigh</li>
</ul>

example.scss

li {
  // $count has to match or exceed the number of elements you're cascading
  @include cascade(6, all);
  transform: translateY(-50%);
  opacity: 0;
  .torrential & {
    transform: translateY(0);
    opacity: 1;
  }
}