【HTML・CSS】マウスアウト時だけtransitionが効かない問題の解決方法

要素にtransitionでアニメーションを効かせる際に、マウスアウト（要素からカーソルを外す）した時だけアニメーションが効かない症状の解決方法です。

マウスアウトした時だけtransitionが効かない症状

以下のように、ボタンの上にカーソルを乗せるとフワッと明るくなり、カーソルをボタンから外す（マウスアウト）とフワッと元の色合いに戻る動きにしたい。

でも、なぜかマウスアウトしたときだけ一瞬で元の色合いに戻ってしまう…。

ちょっとした違いのようですが、マウスを乗せたとき・離したときで挙動が違うので「このサイト、なんか違和感が…」と感じる人もいるかもしれません。

ということで、サクッと直しちゃいましょう！

マウスアウト時にtransitionが効かない原因と解決方法

結論からいうとtransitionを:hoverに指定しているのが原因です。

.btn {
  background-color: #5a4498;
  color: white;
  display:block;
  width: 210px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}

.btn:hover {
  opacity: .7;
  transition: .5s;
}

これだと要素にカーソルを合わせた時だけ.btn:hoverのtransitionが有効になるので、要素からカーソルを外した瞬間にtransitionが無効になり、一瞬で元に戻ってしまうという訳です。

正しい書き方

以下のように.btn本体にtransitionを指定します。

.btn {
  background-color: #5a4498;
  color: white;
  display:block;
  width: 210px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  transition: .5s;
}

.btn:hover {
  opacity: .7;
}

これでマウスアウトした時にもフワッと色合いが戻るようになります！