Transition Delay Mixin

index.html

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

script.coffeescript

# applying and removing classes for demo
# you'll normally be doing interactive stuff like this with this mixin
toggle = ->
  document.body.classList.toggle "active"
  setTimeout =>
    toggle()
  , 1000
toggle()

style.scss

// actual mixin
@mixin stagger-delay( 
  
  // delay between staggers, any time
  // unit is valid here
  $delay: 0.1s,
  
  // children you'd like to count up to
  $total: 1, 
  
  // delay you'd like to start with
  $start: 0s,
  
  // any additional selectors you'd like
  // to use, in case you're targeting a child
  // of this nth element
  $selector: "",
  
  // nth kind you're targeting,
  // so: "of-type" or "child"
  $kind: "of-type"
  
){
  $i: 0;
  @while $i < $total {
    &:nth-#{$kind}( #{$total}n+#{$i+1})#{$selector} {
      transition-delay: #{$start+($delay*$i)};
    }
    $i: $i+1;
  }
}

// sample usage
div {
  transition: transform 0.15s ease-in-out;
  transform: translate(  0 , 0% );
  @include stagger-delay( 0.15s , 6 );
  
  position: relative;
  width: 5vw;
  height: 5vw;
  background-color: red;
  display: inline-block;
  border-radius: 50%;
  margin: 1vw;
}

body.active {
  div {
    transform: translate( 0, 150% );
  }
}

// some base page styling
html , body {
  position: absolute;
  text-align: center;
  line-height: 100vh;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 0;
  left: 0;
  top: 0;
}

transition-delay-mixin.markdown

Transition Delay Mixin

Quickly write delayed transitions.

A Pen by Matt Daniel Brown on CodePen.

License.