SCSSの効率的な繰り返し処理：forループ内で:nth-child( ) を使う手順

html

<div class="circle-animation">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
</div>

“circle-animation”クラス内に、五つのdivタグを定義

それぞれにクラス名（tem1～item5）をつけます。

後述の５つの円に対応しています。

SCSS

.circle-animation {
    text-align: center;

    & div{
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: blue;
        border-radius: 50%;

        animation: sk-circledelay 2s infinite;

    }

    & .item1 {
        animation-delay: -0.2s;
    }
    & .item2 {
        animation-delay: -0.4s;
    }
    & .item3 {
        animation-delay: -0.6s;
    }
    & .item4 {
        animation-delay: -0.8s;
    }
    & .item5 {
        animation-delay: -1.0s;
    }

}

@keyframes sk-circledelay {
    0% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

【　緑色部で基本のスタイルを定義　】

青色の30pxの円を中央配置する

【　赤色部の各クラスで、アニメーションの遅れ時間を定義　】

それぞれの item クラスについて

円 のアニメーションの遅れ時間を指定

item1は、-0.2秒の遅れ
item2は、-0.4秒の遅れ
item3は、-0.6秒の遅れ
item4は、-0.8秒の遅れ
item5は、-1.0秒の遅れ

【　青色部で丸印のアニメーションを定義　】

アニメーション周期2秒で連続

0%,80%,100%で、倍率零

40%で、倍率100%

html

<div class="circle-animation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

“circle-animation”クラス内に、五つのdivタグを定義

それぞれが、後述の５つの円に対応しています。

SCSS

.circle-animation {
  text-align: center;
  & div{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: blue;
    border-radius: 50%;

    animation: sk-circledelay 2s infinite;

      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation-delay: -0.2s*$i;
      }
    }
  }
}

@keyframes sk-circledelay {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

【　緑色部で基本のスタイルを定義　】

青色の30pxの円を中央配置する

【　赤色部のforループ内で、アニメーションの遅れ時間を定義　】

@for $i from 1 through 5 でi を1 から 5 までインクリメントして、{ }内の処理を五回実行する。

:nth-child(#{$i}) 内で、i 番目の 円 のアニメーションの遅れ時間を、-0.2s*$i 秒にする処理を実行します

【　青色部で丸印のアニメーションを定義　】

アニメーション周期2秒で連続

0%,80%,100%で、倍率零

40%で、倍率100%