September 2, 2015

Sass Animation Delays

Here’s a quick and easy way to delay animations between elements by using a Sass @for loop.

.dot {
  animation: bob 1s ease infinite;
  
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      animation-delay: $i * 0.1s;
    }
  }
}

Google Dots Example

See the Pen 3988b1d2afcfb1f6d0a0cb1a394b9b5e by Ryan McLaughlin (@ryanmclaughlin) on CodePen.

See the CodePen