Microsoft Edge懸停錯誤

Question

我在Microsoft Edge中有一個錯誤。 懸停期間的<div>有transform: scale(1.5); transition: transform 1s; 。 但是當你將光標移動到div時，等待1秒，移出然后快速移動到div，div的比例被打破並且轉換消失。 有沒有辦法解決這個問題？ 這是小提琴 。

 div { background-color: green; transition: transform 1s; height: 100px; width: 100px; } div:hover { transform: scale(1.5); } 

 <div></div> 

Answer 1

要在Edge上修復此轉換問題，請使用transition-timing-function屬性，這將通過影響速度來解決問題，使其在開始和結束時變慢。 然后，您可以設置動畫長度（以秒為單位），使其達到transition-duration的原始速度

 div { background-color: green; transition: transform 1s; height: 100px; width: 100px; } div:hover { transform: scale(1.5); transition-timing-function: ease-in-out; } 

 <div></div> 

編輯：如果你仔細注意到懸停時寬度變化的某種故障，但整體過渡是順利的