transitionの使い方メモ

transitionとは、CSSでスタートの状態、エンドの状態を定義して、その変化を徐々に行うことで、アニメーション効果を持たせることができる。

一番簡単な使い方は下記のように変化前と変化後を記載する。「transition-delay: 2s;」が2秒で変化するという事。ここでのトリガーは要素にマウスオーバーしたとき。「:hover」がその意味を持つ。

#sample {
  font-size: 14px;
  transition-delay: 2s;
}

#sample:hover {
  font-size: 36px;
}

マウスオーバーではなく、JavaScriptなどでクラス名の変更をトリガーにすることもできる。CSSに下記だけ書いておいて、クラス名をJSでsampleに変更すればアニメーションが効く。

.sample {
  font-size: 14px;
  transition-delay: 2s;
}

ただし、「.style.display="block";」で要素を表示させてから、すぐにクラス名を変えてもアニメーションは効かない。「setTimeout」などでウェイトをかけてやるとうまく動いた。