SCSS: Delayed sliding in list elements.

list-slide.scss

/*
 * Animation and Timing Variables
 */
$element:     '.menu-item'; // Pick element you want to animate
$length:      1s; // Length of animation
$stage:       0.05s; // Delay increments
$movement:    1rem; // How noticable the movment will be
$transition:  cubic-bezier(0.175,0.885,0.32,1.275); // The animation easing

/*
 * Give lists a nudge before they animate,
 * then animate them back to original position
 */
#{$element} {
  transform:  translateX(#{$movement});
  // When menu is open, animate!
  .menu-active & {
    animation: delay $length $transition forwards;
  }
}

// Animation frames
@keyframes delay{
  from {
    transform:  translateX(#{$movement});
  }
  to {
    transform:  translateX(0);
  }
}

/*
 * For every element in succession, delay incrementally
 */
@for $i from 1 through 10 {
  $delay: $stage * $i;
  #{$element}:nth-of-type(#{$i}){
    animation-delay: $delay;
  }
}