CSS3 transitionを使用してhoverで色の変更をfade in/fade out させる

CSS3のtransitionやanimateをいつも使う度に忘れるのでメモ。

変化前の（大元の）方のクラスにtransitionの初期値を、

hover後のクラスに変化後のパラメーターを入れる。

.element {

  transition: all .2s ease-in;

  background: #f1f1f1;

}

.element:hover {

  background: #eee;

}

またtransitionは変化前後の数値を比較して計算するため、基本的に数値で指定するパラメーターのみしか受け付けない。（バイナリは使用不可）

例：visibilityは使えないがopacityは使える

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Py...

www.w3schools.com