使用转换和缩放Chrome和FireFox时，文字会模糊

Question

当我同时使用transition和transform时，chrome和firefox上的动画都不是很流畅。当你将鼠标悬停在它上面时，它会模糊。唯一正常的浏览器是IE。

Chome / FireFox （注意文字，当动画开始时它开始变得模糊。完成后它会弹回到平滑的字母。）

期望的结果（这在IE中有效）

如何在chrome和firefox上顺利制作这些动画？

段：

转换完成后，元素必须再次聚焦。这就是chrome和firefox现在的样子。

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

Answer 1

您可以使用字体相对单位（em）完成非常相似的效果，并在悬停时增加元素字体大小。

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

请注意，这通常被认为比使用变换更少表现，至少尝试定位元素，以便周围的重新流动更少。

Windows 10上的Chrome 64：

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: .875em; /* =14/16 or whatever your base font size is */
  color: #fff;
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
  transition: all .33s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
  transition: all .33s ease-in-out;
}

<span style="position: relative; left: 2.5em; top: 1em;">
  <button>Hover me</button>
</span>

Answer 2

我设法通过以下方式删除Firefox上的模糊：

背面可见性隐藏修复了问题，因为它将动画简化为对象的正面，而默认状态是正面和背面。

backface-visibility: hidden;

或（或两者）

TranslateZ也可以用来为动画添加硬件加速。

transform: translateZ(0);

Answer 3

您可以尝试透视可以解决您的问题，它可以将文本修复到它的z轴，没有技术想法的原因。

＆＃13;

＆＃13;

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  -webkit-perspective: 1;
  perspective: 1;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

＆＃13;

<button>Hover me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我找到的除去模糊效果的最佳和迄今唯一的方法是首先缩小元素，然后将其缩放到原始大小。 这是一个例子：

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  padding: 20px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  transform:scale(0.7);
}

button:hover {
  transform : perspective(1px) scale(1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

我知道这不是理想的结果，但我看起来很努力，没有找到更好的东西。