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> 

编辑：如果你仔细注意到悬停时宽度变化的某种故障，但整体过渡是顺利的