CSSのtransition。状態間の変化を定義するプロパティ【CSSメモ】

CSSのtransitionの概要
transitionの設定方法
transitionの設定例
transitionはtransformと組み合わせるといろいろできる
各種個別設定

CSSのtransitionの概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

transitionは要素の2つの状態間の変化を決めるものです。

とある状態からとある状態に移る際の時間や加速曲線を設定します。

例として、opacity:1の要素にマウスオーバーすると、opacityが0.5（半透明）になるとして、通常は瞬時に切り替わるところを1秒かけて切り替える、などに使います。

以下はMDNのtransitionの項目です。

transition - CSS: カスケーディングスタイルシート | MDN

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

transitionの設定方法

以下の4つのプロパティを一括で指定できます。

transition-property : アニメーションを適用するプロパティ
transition-duration : アニメーション完了まで時間
transition-timing-function :アニメーション実行中の値の変更速度（加速曲線）
transition-delay :アニメーションが始まるまでの待機時間

初期値は以下になります。

transition-property: all ;
transition-duration: 0s ;
transition-timing-function: ease ;
transition-delay: 0s ;

以下のような感じで指定します。

.transition-3:hover{
  opacity: 0;
  height:200px;
  transition: all 1s ease-out 1s;
}

transitionの後に1sとだけつけると、durationだけきいて、それ以外は初期値のままになります。細かく設定する必要が無い場合は、durationの時間だけ設定しておくのが便利です。

transitionの設定例

transition: 1s;

hoverにtransitionを設定。マウスオーバー時はアニメーションする。マウスアウト時はアニメーションしない。

.transition-1{
  height:100px;
  background-color: #111;
  color:#ccc;
  opacity: 1;
}
.transition-1:hover{
  opacity: 0;
  transition: 1s;
}

hover側にしかtransitionを設定していないため、transition-1⇒transition-1:hoverの時だけアニメーションが反映されます。逆は動作しません。

transitionの特徴の一つがこれです。一方通行の二点間の状態変化の設定になります。

transitionは1sしか設定していないのですが、こうするとduration（アニメーション完了までの時間）のみが指定され、その他の要素は初期値になります。

transition: 1s;

元とhover両方にtransitionを設定。行き帰りでアニメーションする

.transition-2{
  height:100px;
  background-color: #111;
  color:#ccc;
  opacity: 1;
  transition: 1s;
}
.transition-2:hover{
  opacity: 0;
  transition: 1s;
}

transition-1とtransition-1:hoverの両方にtransition: 1sを設定しています。

こうすると、行きと帰りで両方ともアニメーションが反映されます。

transition-1:hover⇒transition-1にもアニメーションを反映する場合は、transition-1にtransitionを設定する必要がある、ということです。

transition: all 1s ease-out 1s;

opacityと高さが1秒でアニメーションする。マウスオーバー時に1秒のディレイがかかる。transition-timing-functionはease-out

.transition-3{
  height:100px;
  background-color: #4a4ac3;
  color:#ccc;
  opacity: 1;
}
.transition-3:hover{
  opacity: 0;
  height:200px;
  transition: all 1s ease-out 1s;
}

hoverに、opacityに加えてheightを設定しています。

そのため、1秒かけてheightが倍の200pxになっています。

allはトランジションが反映される要素全てが変化します。

ここを「opacity」にすると、heightはディレイやdurationが利かずに一瞬で200pxになり、1秒後にopacityが利いて透明になります。「height」にすると、一瞬で透明になり、1秒後に見えない状態でheightが200pxになります。

加速曲線に関しての詳細は以下に例が上がっています。