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つ目のアイテムもディレイがかかってしまうので引いています。
この記事が気に入ったらサポートをしてみませんか?