マウスを乗せたときと外したときでtransitionの内容を変える方法

CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。 以前、「CSSで画像リンクにマウスを乗せたときの動きを考えてみた」という記事の中で、擬似要素を作った半透明のボックスが左から右へすり抜けることで光っているような感じにしたものを紹介しました。 ここで紹介したサンプルではマウスを外したときに右にいったボックスが左に戻るわけですが、光るのはマウスを乗せたときだけの方がいいと思います。 当時はいい方法が思いつかなかったのですが、方法が思いついたので紹介します。 まず、そのときに紹介したのが下になります。 マウスを外したときにtransitionさせないようにするには a {transition: 1s;}と指定した場合はマウスを乗せたときも外したときもtransitionは適用されますが

[takahiro_kihara]

元のと:hoverの両方にtransitionを指定(19/01/25)ってブクマしてたの忘れorz

[clea0000]

　hover無しだけ・・ON・OUT両方／hover・・ONだけ／hover無し※hover指定あり・・OUTだけ

[kitokitoki]

「マウスを乗せたときと外したときで違うようにtransitionさせる方法」画像ホバー。

[Hi32]

ホバーアニメーション。オンだけでいい時とか