使用 css transition 和 scale() 时文本抖动

Question

我到处搜索，包括 SO，但似乎没有人找到答案。我的问题是，当我使用 transform: scale(1.2) 和 opacity 将元素悬停时，元素会变大，这很好，但是 text/content 在出现和缩放时会摇晃或摆动。

有没有办法阻止来自 shaking/wiggling/flickering 的文本，因为它很烦人且不友好？

你可以在这里看到一个例子：http://jsfiddle.net/dv78etsv/

非常感谢

Answer 1

您运行同时进行几个转换，只需删除所有转换并决定一个 - 对于特定 css 属性 transition: opacity 1s

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

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

Text shaking when using css transition and scale()