我有一些CSS，当鼠标悬停时，CSS过渡效果将移动一个div。
问题在于，正如你在示例中所看到的那样，translate过渡效果会产生可怕的副作用，使得div中的图像向下/向右移动1px（可能还会微微缩小），以至于它看起来不协调、模糊不清...
从试错的过程来看，这个故障似乎在整个悬停效果应用期间都存在，并且只在translate过渡效果移动div时才会出现（当去除box shadow和opacity时，也不会对错误产生影响）。
该问题似乎仅在页面具有滚动条时发生。因此，只有一个div实例的示例是正常的，但一旦添加了更多相同的div并且页面因此需要滚动条，问题就再次出现...
尝试使用 filter: blur(0);
这对我有用
#before
<header class="container">
<div class="transformed div">
<span class="transform wrapper">
<span class="transformed"></span>
<span class="transformed"></span>
</span>
</div>
<div class="affected div">
</div>
</header>
#after
<header class="container">
<div class="affected div">
</div>
<div class="transformed div">
<span class="transform wrapper">
<span class="transformed"></span>
<span class="transformed"></span>
</span>
</div>
</header>
filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration
在设置过渡持续时间的值为.3s，与过渡时间步骤.3s相等的情况下，我得到了帮助。
对我而言，在使用关键帧动画中，只有在 Chrome 浏览器（Windows 和 Mac）中通过“transform”进行动画处理时才会出现模糊。对我而言，“-webkit-optimize-contrast”设置只能部分地帮助解决这个问题。为了获得最佳效果，我还必须使用一个“神奇值”来对 scaleX 进行调整（稍微大于 1 而不是等于 1）。
以下是可行的代码：
img {
image-rendering: -webkit-optimize-contrast;
}
@keyframes scale-in-left {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1.000001);
opacity: 1;
}
}
@keyframes scale-in-left {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}