[CSS]Animation学びなおし

keyword

• animation-property
• keyframe-property

サンプル

index.html

 <div class="spinner">
      <div class="spinner__dot">
        <div class="spinner__dot--first"></div>
        <div class="spinner__dot--second"></div>
        <div class="spinner__dot--third"></div>
      </div>
    </div>

index.scss

.rect {
  display: inline-block;
  width: 70px;
  height: 70px;

  background-color: black;
  // sk-bouncedelayというキーフレームアニメーションを1.4秒間適用します
  animation: sk-bouncedelay 1.4s;
  // easeによって始めと終わりがゆっくりとなるようにします
  animation-timing-function: ease;
  // アニメーション開始までの遅延を指定します
  animation-delay: 3s;
  // アニメーションの動作回数を指定したいとき
  // animation-iteration-count: 4;
  // アニメーションを無限に繰り返します
  animation-iteration-count: infinite;

  animation-direction: alternate;

}

// @keyframes {キーフレームの名前}
// 0%と100%の時のアニメーション状態を記述すること
// 途中(10%や50%)のアニメーション状態も記述可能。
@keyframes sk-bouncedelay {
  0% {
    transform: scale(0);
    background-color: orange;
  }
  50% {
    transform: scale(2);
    background-color: pink;
  }

  100% {
    transform: scale(1);
    background-color: yellow;
  }

  //  from ~ toでも0% ~ 100%の代わりになる
  // from {
  //   transform: scale(0);
  // }

  // to {
  //   transform: scale(1)
  // }
}

Mixin

役割

アニメーションの設定を関数で表現できます。
scssファイルでのみ利用できます。

例

index.scss

@mixin animation($name) {
  animation-name: $name;
}


// 呼び出し側
.sample {
 @include animation($name: sampleKey)
}

メリット

• 呼び出し側でアニメーションの設定をしなくて良い
• mixinで作成した関数を利用するとデフォルト値が利用できる

例2

index.scss

// 引数にデフォルト値を設定できるので、複数に同じ設定をしなくてよい
@mixin animation(
  $name,
  $duration: 1.6s,
  $delay: 3s,
  $iteration-count: infinite,
  $timing-function: ease
) {
  animation: {
    name: $name;
    duration: $duration;
    delay: $delay;
    iteration-count: $iteration-count;
    timing-function: $timing-function;
  }
  background: {
    color: black;
  }

  // 上記は以下のような設定でも同様に動作する。
  // animation-name: $name;
  // animation-duration: $duration;
  // animation-delay: $delay;
  // animation-iteration-count: $iteration-count;
  
}

Mixinのファイル分割

階層

- mixin
  - _mx-animation.scss
- index.scss

index.scss

// インポート
@use "mixin/mx_animation" as mxn;

// 利用
.sampleCls {
 @include mxn.animation($name: sample-keyframe);
}

• mixinファイルは_(アンダーバー)を先頭につけること(scssがほかのファイルにエクスポートされるファイルと認識させるため)