SASSで簡単にアニメーションのタイミングをずらす方法

同じ要素が複数並んでおり、アニメーションが始まるタイミングに差をつけたい。
そんな事が結構多い気がします。

スクロールアニメーションやローディングアニメーションなんかがそうですね。

そういう時に遅くなるスピードを最初に設定しておいて、要素のインデックス番号に応じて自動でディレイが加算される@mixinをご紹介します。

@mixin animationDelay($quantity: 5, $speed: 150ms){
  @for $i from 1 through $quantity{
    &:nth-child(#{$i}){
      animation-delay: ($i - 1) * $speed;
    }
  }
}




//使う時は@includeで呼び出します
.hoge{
  @include animationDelay($quantity: 7, $speed: 200ms);
}

//コンパイルされたcss↓
.hoge:nth-child(1){
  animation-delay: 0ms;
}
.hoge:nth-child(2){
  animation-delay: 200ms;
}
.hoge:nth-child(3){
  animation-delay: 400ms;
}
.hoge:nth-child(4){
  animation-delay: 600ms;
}
.hoge:nth-child(5){
  animation-delay: 800ms;
}
.hoge:nth-child(6){
  animation-delay: 1000ms;
}
.hoge:nth-child(7){
  animation-delay: 1200ms;
}

@for文で1からアイテムの個数までの値を変数「$i」に順番に代入され、繰り返し処理されていきます。

今回の例だとアイテム数が7個なので、1~7まで繰り返されることになります。

そして数字が代入された$iをアイテムのインデックス番号に当てて、:th-child(#{$i})でセレクターに指定します。

最後に、インデックス番号から1を引いた数に変数「$speed」に代入したアニメーションを遅らせる値をかけてやれば完成です。
この1 を引かないと1つ目のアイテムもディレイがかかってしまうので引いています。