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

Question

我到处搜索过，包括SO，但似乎没有人找到答案。我的问题是，当我使用 transform: scale(1.2) 和 opacity 悬停在元素上时，该元素会增长，这很好，但文本/内容在出现和缩放时会摇晃或摆动。

有没有办法阻止文本晃动/摆动/闪烁，因为它很烦人而且对用户体验不友好？

您可以在此处查看示例：http://jsfiddle.net/dv78etsv/

非常感谢

Answer 1

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

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

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

工作示例http://jsfiddle.net/dv78etsv/2/

Answer 2

我遇到了类似的问题，我尝试了：

box-sizing: border-box;

它似乎奏效了。