イーズインアウトを使用した CSS トランジションは、ホバー時にはスムーズに動作するのに、マウスアウト時には突然動作するのはなぜですか?

CSS トランジション イーズイン イーズアウトの難題

all プロパティとイーズインを使用して要素にトランジションを適用する場合フィドルの例 (http://jsfiddle.net/garethweaver/Y4Buy/1/) で見られるように、アウト イージング関数では、要素の上にマウスを置くと要素がスムーズに遷移します。ただし、マウスアウトすると突然元に戻ります。なぜこれが起こるのか、そしてそれをどのように解決するのかという疑問が生じます。

解決策は、遷移プロパティの :hover 疑似クラスだけではなく、基本要素をターゲットにすることにあります。要素自体にトランジションを定義すると、ホバー状態に入るときとホバー状態から出るときの両方に適用されます。

更新された例

修正された CSS コード:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

この変更により、画像は両方向にスムーズに遷移し、ホバーすると緩やかに変化し、マウスが画像領域から出ると滑らかに消えます。

以上がイーズインアウトを使用した CSS トランジションは、ホバー時にはスムーズに動作するのに、マウスアウト時には突然動作するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。