CSSのtransitionのお話です
A→Bの変化は0.5秒かけて変化させたいが、B→Aの時は一瞬で戻る
を実装するのに苦戦したのでメモを残しておきます
いいタイトル名が思いつかなかった...
こんなことがしたいとき
(マウスを離すとノータイムで色が変わる)
CSSの
transition-duration:0.5s;
をタグにつけるとA→BもB→Aも0.5秒になってしまいます
A→Bのみ変化させるには
クラスのタグに
transition-duration: 0s;
疑似クラス側(今回なら:hover側)のタグに
transition-duration: 0.5s;
をそれぞれ与えるとできるようです
B→Aの逆も同じようにできます
また、transition-duration等の秒数を指定するプロパティでは単位をきちんと指定しなければなりません。(動作するブラウザもあるらしいですが)きちんと[0s]と書くようにしましょう
この方法はtransition-delayやtransition-timing-functionでも同じです
.
