SCSSでfor構文を使って等間隔で動くアニメーションを作る方法

はじめに

以前「Sassでクラス名を連番で書く方法(@for構文と@if構文)」というものを紹介しました。

今回はそれの応用で、SCSSのfor構文を使用して、等間隔で動作するCSSアニメーションを作ってみましたので、その方法を紹介します。

仕上がりイメージ

目次

等間隔で動くアニメーションを作る

for構文についての基本は前回の投稿をご確認下さい。

今回は「等間隔で非表示(opacity: 0;)から表示(opacity: 1;)に切り替わるボックス」を作ってみます。

HTML

ボックスを作るだけなので、divの中には何も記述していません。

p-box01_itemを等間隔に並べたいので、親要素でp-box01を作り、これをFlexBoxで並べています。

  1. <div class="p-box01">
  2. <div class="p-box01_item"></div>
  3. <div class="p-box01_item"></div>
  4. <div class="p-box01_item"></div>
  5. <div class="p-box01_item"></div>
  6. <div class="p-box01_item"></div>
  7. <div class="p-box01_item"></div>
  8. <div class="p-box01_item"></div>
  9. <div class="p-box01_item"></div>
  10. <div class="p-box01_item"></div>
  11. <div class="p-box01_item"></div>
  12. <div class="p-box01_item"></div>
  13. <div class="p-box01_item"></div>
  14. <div class="p-box01_item"></div>
  15. <div class="p-box01_item"></div>
  16. </div>

SCSS

  1. .p-box01 {
  2. display: flex;
  3. align-items: stretch;
  4. justify-content: center;
  5. flex-wrap: wrap;
  6. gap:10px;
  7. .p-box01_item {
  8. display: block;
  9. width: 80px;
  10. height: 80px;
  11. background: #aaa;
  12. animation-name:box01_item_animation;
  13. animation-duration: 1s;
  14. animation-fill-mode: forwards;
  15. opacity: 0;
  16. @for $box01_number from 1 through 14 {
  17. &:nth-of-type( #{$box01_number} ) {
  18. animation-delay: calc(#{$box01_number}s * 0.1);
  19. }
  20. }
  21. @keyframes box01_item_animation {
  22. 0% {
  23. opacity: 0;
  24. }
  25. 100% {
  26. opacity: 1;
  27. }
  28. }
  29. }
  30. }

SCSSが長くなってしまったので分割して説明します。

SCSS(1~6行目)

p-box01_item要素を入れる親要素です。

  1. .p-box01 {
  2. display: flex;
  3. align-items: stretch;
  4. justify-content: center;
  5. flex-wrap: wrap;
  6. gap:10px;

先述のとおりFlexBoxで等間隔に並べています。また、p-box01_itemの間隔はgap:10px;としています。

SCSS(7~15行目)

主にp-box01_itemの形状について設定しています。

  1. .p-box01_item {
  2. display: block;
  3. width: 80px;
  4. height: 80px;
  5. background: #aaa;
  6. animation-name:box01_item_animation; /*アニメーションの名前を設定(あとで使用)*/
  7. animation-duration: 1s; /*アニメーションの動きを1秒で設定*/
  8. animation-fill-mode: forwards; /*アニメーションが100%に達したらそこで止める*/
  9. opacity: 0; /*初期値では要素を表示させない*/

各々のプロパティ等についてはソースに追記していますのでご確認下さい。

animation-fill-mode: forwards; にしておかないと、アニメーションが終わった後、opacity: 0;に戻ってしまいます。

SCSS(16~20行目)

ここが今回の本題となるfor構文です。

  1. @for $box01_number from 1 through 14 {
  2. &:nth-of-type( #{$box01_number} ) {
  3. animation-delay: calc(#{$box01_number}s * 0.1);
  4. }
  5. }

今回、$box01_numberと名称を付けて、p-box01_itemの個数分くりかえし処理するよう設定しています。

さらに、疑似要素nth-of-type()と、animation-delayにその繰り返しの数値を代入させています。

animation-delay: calc(#{$box01_number}s * 0.1);とすることで、要素の個数が増えるごとに「〇番目の要素 × 0.1」となるように設定しています。

これをCSSに直すと以下のようになります。

CSS

  1. .p-box01_item:nth-of-type(1) {
  2. animation-delay: 0.1;
  3. }
  4. .p-box01_item:nth-of-type(2) {
  5. animation-delay: 0.2;
  6. }
  7. .p-box01_item:nth-of-type(3) {
  8. animation-delay: 0.3;
  9. }
  10.  
  11.  
  12.  
  13. .p-box01_item:nth-of-type(14) {
  14. animation-delay: 1.4;
  15. }

SCSS(21~26行目)

最後はアニメーションの動きに関する処理です。

ここは本題ではないので簡単に説明しますが、opacity: 0;からopacity: 1;へ要素が変化することで徐々に表示されるアニメーションができます。

  1. @keyframes box01_item_animation {
  2. 0% {
  3. opacity: 0;
  4. }
  5. 100% {
  6. opacity: 1;

これで、「p-box01_item要素の数×0.1秒」ごとに等間隔で要素が表示されるアニメーションが完成しました。

できあがったもの

おまけ

要素をウェーブさせてみました。

基本的には上の作り方と同じで、今回はopacityではなくtransform: translateYを使用しています。

また、animation-iteration-count: infinite;として、繰り返しアニメーションされるように設定しています。

HTML

  1. <div class="c-box_normal">
  2. <div class="p-box02">
  3. <div class="p-box02_item"></div>
  4. <div class="p-box02_item"></div>
  5. <div class="p-box02_item"></div>
  6. <!-- 同じものを合計23個作っています -->
  7. <div class="p-box02_item"></div>
  8. </div>
  9. </div>

SCSS

  1. .p-box02 {
  2. display: flex;
  3. align-items: stretch;
  4. justify-content: center;
  5. flex-wrap: wrap;
  6. gap: 4px;
  7. .p-box02_item {
  8. display: block;
  9. width: 20px;
  10. height: 20px;
  11. background: #aaa;
  12. animation-name:box02_item_animation;
  13. animation-duration: .5s;
  14. animation-iteration-count: infinite;
  15. @for $box02_number from 1 through 23 {
  16. &:nth-of-type( #{$box02_number} ) {
  17. animation-delay: calc(#{$box02_number}s * 0.1);
  18. }
  19. }
  20. @keyframes box02_item_animation {
  21. 0% {
  22. transform: translateY(0);
  23. }
  24. 50% {
  25. transform: translateY(10px);
  26. }
  27. 100% {
  28. transform: translateY(0);
  29. }
  30. }
  31. }
  32. }

できあがったもの

SCSSのfor構文を活用すれば、同じ要素がたくさん並ぶ時でも、一つ一つ計算や記述をしなくてよいから大変便利だと思います。