Html 使用css转换和缩放（）时的文本抖动

我到处都找过，包括苏，但似乎没有人找到答案。我的问题是，当我使用

transform:scale（1.2）

和

opacity

悬停元素时，元素会增长，这很好，但文本/内容在显示和缩放时会抖动或摆动

有没有办法阻止文本抖动/摆动/闪烁，因为它很烦人而且不友好

您可以在此处看到一个示例：

---

非常感谢

您同时运行了两个转换，只需删除所有转换并决定一个-对于特定的css属性

转换：不透明度1s

在悬停时删除更改字体大小，不要过度使用过渡，这两个应该足够了：

.carte-sample {
    transition: transform 1s;
}
.carte-inner {
    transition: opacity 1s;
}

工作示例

---

转换功能强大，但也有其局限性。如果排除更改文本大小的规则或仅转换不透明度（

transition:opacity 1.5s ease in out；

第40ish行或删除第105ish行的

font size

规则），则抖动消失。这并不是一个真正的答案，但我只想淡化一些过渡来解决这个问题。