Question

我在Microsoft Edge中有一个错误。悬停期间transform: scale(1.5); transition: transform 1s; div { background-color: green; transition: transform 1s; height: 100px; width: 100px; } div:hover { transform: scale(1.5); }。但是当你将光标移动到div时，等待1秒，移出然后快速移动到div，div的比例被打破并且转换消失。有没有办法解决这个问题？这是fiddle。

<div></div>

where id = 5

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>

编辑：如果你仔细注意到悬停时宽度发生变化的某种故障，但整体过渡在边缘上是平滑的

Microsoft Edge悬停错误

1 个答案: