【備忘録】Animationローダーについて

こんにちは！

今回はAnimationを使ったローダーについてです。
３種類のローダーとなります。

・縦横に180度回転する四角
・交互に大きくなったり小さくなったりする円
・順番に大きくなる長方形

前回同様に内容はUdemyの【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）を文字におこしたものとなります。

自分用にアウトプットなので分かりづらい箇所があるかもしれません。

前回

作り方

See the Pen
ローダー by 👓ならっち👓 (@naratch_)
on CodePen.

今回もCSSはSass（SCSS)で書いてコンパイルしていますので
SCSSの記述をしていきます。

SCSSについて

SCSS

@import "mixin";
.try {
  display: flex;
  .spinner {
    width: 40px;
    height: 40px;
    background-color: #333;
    margin: 100px auto;
    @include animation(
      $name: sk-rotateplane2,
      $duration: 1.2s,
      $iteration-count: infinite,
      $timing-function: ease-in-out
    );
  }

  @keyframes sk-rotateplane2 {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0);
    }
    50% {
      transform: rotateX(-180deg) rotateY(0);
    }
    100% {
      transform: rotateX(-180deg) rotateY(-180deg);
    }
  }

  .double-spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 100px auto;
    & > div {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #333;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      @include animation(
        $name: sk-bounce2,
        $duration: 2s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
      );
      &:nth-child(2) {
        animation-delay: -1s;
      }
    }
  }

  @keyframes sk-bounce2 {
    0%,
    100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }

  .rect-spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    letter-spacing: -2px;

    & > div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;
      @include animation(
        $name: sk-stretchdelay2,
        $duration: 1.2s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
      );
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation-delay: -1.3s + $i * 0.1s;
        }
      }
    }
  }
  @keyframes sk-stretchdelay2 {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
    }
    20% {
      transform: scaleY(1);
    }
  }
}

今回は_mixin.scssというファイルからもCSSを部品として読み込んでいます。

アンダースコアで始まっているファイルは部品とみなされる。
部品を読み込むには@import’〇〇’;(@import “mixin”;）で読み込める。
mixinのCSS

_mixin.scss

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

animation-name:
アニメーションの名前

animation-duration:
アニメーションの時間

animation-timing-function:
アニメーションの周期

animation-delay:
アニメーションの遅延時間

animation-interation-count:
アニメーションの繰り返し数

animation-direction;
アニメーションの向き

animation-fill-mode:
アニメーションの実行前後のスタイルを適用する

の定義と初期値が記入されています。

解説

HTMLの中身

まずは縦横に180度回転する四角から
.spinnerの中身

widthなどは四角形を生成するプロパティです。

@include animation(
mixinのanimationの上書き設定です。

$name: sk-rotateplane2,

$duration: 1.2s,
アニメーションする時間を1.2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす
);

@keyframes sk-rotateplane2
sk-rotateplane2のアニメーション設定。

0% {
transform: perspective(120px) rotateX(0deg) rotateY(0);
perspectiveは親要素に入れる設定するものですが
ブロック内にアニメーションさせたい要素が1つの場合子要素の
transform内で設定をする。
初期状態のためX,Yともに0
}

50% {
transform:perspective(120px) rotateX(-180deg) rotateY(0);
アニメーションしてから0.6秒後にX軸を-180度回転させる。
}

100% {
transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);
アニメーションしてから1.2秒後にY軸を-180度回転させる。
}

次に交互に大きくなったり小さくなったりする円

widthなどは円を生成するプロパティです。

& > div
「>」は、指定した要素の直下にある要素にスタイルを適用
double-spinner直下のdiv

border-radius: 50%;
50％にすることで円にしている。

background-color: #333;
opacity: 0.6;
背景の色と、透明度を設定することで2つの円が見えるようにしている。

position:absolute;
top: 0;
left: 0;
2つの円を重ねている。

@include animation(
mixinのanimationの上書き設定です。

$name: sk-bounce2,

$duration: 2s,
アニメーションする時間を2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす

&:nth-child(2)
子要素のn番目(nth)にスタイルを適用
2個目のdiv要素に適用させる

animation-delay: -1s;
アニメーションを1秒遅らせる

@keyframessk-bounce2

0%,
100%
transform: scale(0);
アニメーションするときと2秒後経ったときに
伸縮倍率を0にする

50%
transform: scale(1);
アニメーションして1秒経過したら伸縮倍率を1倍にする

最後に順番に大きくなる長方形

margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;

letter-spacing: -2px;
文字と文字の間隔を開ける

親要素を整えるプロパティ

& > div {
「>」は、指定した要素の直下にある要素にスタイルを適用
double-spinner直下のdiv

background-color: #333;
height: 100%;
width: 6px;
display: inline-block;

長方形を生成するプロパティ

@include animation(
mixinのanimationの上書き設定です。

$name: sk-stretchdelay2

$duration: 1.2s,
アニメーションする時間を1.2秒

$iteration-count: infinite,
アニメーションを無限に繰り返す

$timing-function: ease-in-out
アニメーションの速度をゆっくり変化し、速度を上げ、また速度を落とす

@keyframessk-stretchdelay2 {
0%,
40%,
100%
transform: scaleY(0.4);
アニメーション開始時と0.48秒、1.2秒経ったら伸縮倍率を0.4倍にする

20%
transform: scaleY(1);
アニメーション開始してと0.24秒経ったら伸縮倍率を1倍にする

for文

@for 変数 from 開始の値 through 終了の値 { 
//変数が開始の値〜終了の値の間、処理が繰り返されます 
}

@for $i from 1  through 5
変数iをを１〜5番目まで繰り返し処理をする

&:nth-child(#{$i}) {
子要素のi番目にスタイルを適用

animation-delay: -1.3s + $i * 0.1s;
-1.3秒で設定しているのはアニメーションが1.2秒のため、子要素の1番目が入ってきたタイミングでちょうど1.2秒にするため、-1.3秒にしている。
-であればいくつでも問題ない。

変数iが代入されて1秒ずつ遅れてアニメーションをする。

まとめ

今回もUdemyの【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）のAnimationで色んなローダーを作ってみようの内容をそのままアウトプットしてみました。

前回同様に、文字に起こすことで、より理解を深めることができました。

今回のアニメーションもあまり実用性はないですが、
基礎を知っているのと知らないのではアニメーションを作るのに大きく変わってくるので
知っといて損はないと思います。