【CSS】アニメーション: animation-delayをsass関数とスタイル属性で設定する
記事更新日:2022-02-02
![サムネイル](https://tsukiusagi.biz/wp-content/uploads/2022/01/css.png)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-delay1.gif?resize=256%2C217&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-1.png?resize=150%2C150&ssl=1)
すべて同時に点滅だと、なんか格好悪い。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3-1.png?resize=150%2C150&ssl=1)
animation-delayを使って、時間差にしよう。
animation-delayの設定方法
方法その1:sass関数を使う
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
@for は、繰り返しの処理にとても便利。
ここをクリックしてコードを見る
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
<div class="crater"></div>
.crater {
animation: opacity 3s infinite alternate;
$count: 7;
$delay: 0;
@for $i from 1 through $count {
&:nth-child(#{$i}) {
animation-delay: $delay +s;
}
$delay: $delay + 1;
}
}
@keyframes opacity {
100% {
opacity: 0;
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-delay2.gif?resize=256%2C217&ssl=1)
【 Point 】
forループの中で、delayの数値を1ずつ足していく
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
バラバラの点滅になった。
方法その2:style属性を使う
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
HTMLのstyle属性を使うと、sassのコードが短くなるから、これもなかなか便利。
ここをクリックしてコードを見る
<div class="crater" style="--i:0;"></div>
<div class="crater" style="--i:1;"></div>
<div class="crater" style="--i:2;"></div>
<div class="crater" style="--i:3;"></div>
<div class="crater" style="--i:4;"></div>
<div class="crater" style="--i:5;"></div>
<div class="crater" style="--i:6;"></div>
.crater {
animation: opacity 3s infinite alternate;
animation-delay: calc(.5s * var(--i));
}
@keyframes opacity {
100% {
opacity: 0;
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-delay3.gif?resize=256%2C217&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
nth-childが使えないときに、いいかも。
まとめ
【 アニメーションの時間遅延の設定方法 】
- sass関数のforループを使う
- HTMLのstyle属性を使う
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
結果は同じなので、状況によって使いわけてみよう。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-delay.gif?resize=783%2C217&ssl=1)
for の いろんな使い方
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-1.png?resize=536%2C564&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-3.png?resize=544%2C558&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-2.png?resize=550%2C538&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
sassでループが使えるのはうれしい。
2022-02-02
編集後記:
この記事の内容がベストではないかもしれません。