CSSを学ぼうシリーズその2(全5回)：transitionでワンポイントアニメ

CSSアニメーション、使ってますか？

• HTML要素をアニメーションさせるなら大抵のものはCSSのみで可能
  ただしJSでclassの付与／除去程度は必要
• 使いすぎは良くないが、ちょっとした動きを付けるのに効果的

※リッチなアニメーションはJavaScriptを使う。そのためのAPIが備わっている

---

CSSアニメーションの種類

• keyframesを使った本格的なもの
  CSS Loaders
• transitionを使った簡易なアニメーション
  ワンポイントで使うならこれで充分！

---

transitionの考え方

• プロパティの値の変化の仕方を指定する
  対象のプロパティ／変化スピード／加速関数
• HTML要素に２つの状態（例えば通常時とマウスオーバー時）を持たせ、それをtransitionでゆっくり切り替える感じ

---

具体例１）フェードイン／アウト

• opacity：透明度。1が不透明、0が透明

.fade-in {
  transition: opacity 1s ease-in-out;
}
.fade-in-initial {
  opacity: 0;
}

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const fadeInButton = document.querySelector('.fade-in');
    fadeInButton.classList.remove('fade-in-initial');
  }, 1000); // 1秒後にフェードインを開始
});

• 画面表示直後は opacity: 0; を指定
  つまり見えない状態
• 画面表示後にJavaScriptを使って opacityを除去（つまりopacity: 1;となる）

---

具体例２）マウスホバー時の強調表示

.enphasis {
  transition: background-color 0.2s ease-in-out;
}
.enphasis:hover {
  background-color: rgba(255, 0, 0, .2);
}

※JS不要！

---

応用

• transformを使うと相当いろいろできる！
  移動／拡大／縮小／かいて　など

---

最後に

• 強調表示にワンポイントは有効
• 自前で実装することは少ないかもしれないが、知っておくとちょっと楽しい