銀河鉄道

月うさぎBlog

【CSS】アニメーション: animation-delayをsass関数とスタイル属性で設定する

記事更新日：2022-02-02

サムネイル
animationdelay

すべて同時に点滅だと、なんか格好悪い。

animation-delayを使って、時間差にしよう。

animation-delayの設定方法

方法その１：sass関数を使う

@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;
	}
}

【 Point 】

forループの中で、delayの数値を１ずつ足していく

バラバラの点滅になった。

方法その２：style属性を使う

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;
	}
}

nth-childが使えないときに、いいかも。

まとめ

【 アニメーションの時間遅延の設定方法 】

  • sass関数のforループを使う
  • HTMLのstyle属性を使う

結果は同じなので、状況によって使いわけてみよう。

for の いろんな使い方

sassでループが使えるのはうれしい。

著者

author
月うさぎ

2022-02-02

編集後記：
この記事の内容がベストではないかもしれません。

記事一覧