【CSS】文字のアニメーション

udemy動画内容の備忘録です。

左から順に文字が表示されるようなアニメーションです。

• timing-functionでそれぞれの文字のアニメーション発動をずらします。
• 別ファイルである_mixin.scssを@importを使って呼び出します。

index.html

    <div id="container">
        <div class="animate-title inview">
            <span class="char">A</span>
            <span class="char">N</span>
            <span class="char">I</span>
            <span class="char">M</span>
            <span class="char">A</span>
            <span class="char">T</span>
            <span class="char">I</span>
            <span class="char">O</span>
            <span class="char">N</span>
        </div>
        <button onclick="document.querySelector('.animate-title').classList.toggle('inview');">Animation</button>
    </div>

style.scss

@import 'mixin';

body {
  margin: 0;
}

#container {
  position: relative;
  height: 100vh;
  background-color: teal;
}
.animate-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0;
  font-size: 2em;

  &.inview {
    opacity: 1;

    & .char {
      display: inline-block;

      @include animation(
        $name: kf-animate-chars,
        $duration: 0.5s,
        $timing-function: cubic-bazier(0.39, 1.57, 0.58, 1),
        $fill-mode: both
      );

      @for $i from 1 through 9 {
        &:nth-child(#{$i}) {
          animation-delay: $i * 0.04s;
        }
      }
    }
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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