SCSSでアニメーション（初心者向け） #CSS

○SCSSでアニメーションを使うための方法をまとめました。
　本当に初めて使う人向けのため、濃い内容ではありません。ご了承ください。

SCSSでアニメーションを使おうと思った時にヒットする記事が古いものばかりだったため、
今の条件で動く記事を書いてみました。
なお、scssのファイル構成はこちらの方のやり方を参考にさせていただいております。
他の方とはファイル構成が異なっていたりする場合もございます。ご了承ください。
https://tsudoi.org/guide/detail/9.html

_animation.scss

@mixin keyframes($animation-name) {
  @keyframes #{$animation-name} {
    @content;
  }
}
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@include keyframes(fadein) {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
    }
  }
@include keyframes(slidein) {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
      }
}

※SCSSのコンパイラーに読み込ませないように「_animation.scss」にしています。

今回は使い回しができるということが、わかりやすいように「fadein」と「slidein」という二つのアニメーションを作ってみました。
実際にアニメーションを当てるページごとのscssに先ほどの「_animation.scss」をインポートして使います。

_top.scss

@import "./../../mixin/animation";

.fadein {
  @include animation(fadein 3s);
}
.slidein{
  @include animation(slidein 3s);
}

それを大元のSCSSファイルである「style.scss」で読み込みます。

style.scss

@import './top/top';

コンパイラされたcssを該当ページのhtmlファイルで読み込めばで起用されます。

style.css

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
    font-size: small;
  }
  100% {
    opacity: 1;
    font-size: larger;
  }
}

@-webkit-keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

.fadein {
  -webkit-animation: fadein 3s;
  animation: fadein 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.slidein {
  -webkit-animation: slidein 3s;
  animation: slidein 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./../../scss/style.css" />
    <link rel="stylesheet" href="./../../scss/page/style.css" />
    <title>Document</title>
  </head>
  <body>
      <p class="fadein">フェードインテキスト</p>
      <p class="slidein">スライドインテキスト</p>
  </body>
</html>

以上簡単ですが、SCSSでアニメーションを使う方法でした。
細かい解説などはしていませんので、気になる方は自身で調べてみてください。