日別アーカイブ: 2021年8月26日

Text Animationを作る1(テキストアニメーション)

コメントを残す

その4から続く

ボタンを押したら発火するシンプルなアニメーションを作ってみよう！

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
  <div id="container">
  <div class="animate-title">
    <spanclass="char">A</span>
    <spanclass="char">N</span>
    <spanclass="char">I</span>
    <spanclass="char">M</span>
    <spanclass="char">A</span>
    <spanclass="char">T</span>
    <spanclass="char">I</span>
    <spanclass="char">O</span>
    <spanclass="char">N</span>
  </div>
  <button onclick="document.querySelector('.animate-title').classList.toggle('inview');">Animation</button>
</button>
  </div>
  </body>
</html>

mixinの記述

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

SCSSの記述

続きを読む →