為什麼具有緩入緩出功能的 CSS 過渡在懸停時表現平穩，但在滑鼠移開時表現突然？

CSS 過渡緩入緩出難題

使用all 屬性和escape-in​​ 將過渡應用到元素時緩動功能，如範例小提琴（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中文網其他相關文章！