• 締切済み

:hover時のtransitionが不安定

<style> div { width: 250px; height: 250px; background: red; opacity: 1; transition: all 500ms linear; } div:hover { opacity: 0; } </style> <div></div> 上記のようなコードで、マウスホバー時にtransitionが効かず、アニメーションすることなく要素の透明度が切り替わってしまうことが度々あります。Mac Chromeの最新版 + oapcityの制御においてのみ発生する現象なのですが、対策、もしくはこの問題について何かご存知の方いらっしゃいましたら、ご回答お願いします。なお、prefixや、transition対象をallからopacityに指定、cssの:hoverからjavascriptでhover制御へ変更等、思いつくことはひと通り試しましたが特に変化はありませんでした。また、background-visibility:hiddenを指定すると、解決はしませんが、発生頻度は多少緩和するような気がします。 よろしくお願いします。

みんなの回答

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.3

後は、div:hover内にtransitionをつけて見て、時間を軸をもう少し遅くして確かめて見てはいかがでしょうか?500msは、結構早いと思います。 3~5sで実装して見て動けば、早過ぎたことになると思います。 それでもダメならCSSアニメーションプロパティでやるのはいかがでしょうか。 アニメーションプロパティなら、実装出来ると思います。

donutshop
質問者

お礼

ありがとうございました。

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.2

それとhoverに-webkit-transitionつけてみましたか?

donutshop
質問者

お礼

ありがとうございました。

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.1

-webkitつけましたか?

donutshop
質問者

お礼

ありがとうございました。

donutshop
質問者

補足

ご回答ありがとうございます。Prefixはひと通り試してみましたが、変化ありませんでした。