我到处搜寻,包括SO,但似乎没有人找到答案。我的问题是,当我使用transform: scale(1.2)
和opacity
悬停元素时,元素会增长,这很好,但文本/内容在显示和缩放时会摇晃或摆动。
有没有办法阻止文字摇晃/摆动/闪烁,因为它很烦人而且不是UX友好的?
您可以在此处查看示例:http://jsfiddle.net/dv78etsv/
非常感谢
答案 0 :(得分:2)
你同时运行几个转换,只需删除所有转换并决定一个 - 具体的css属性transition: opacity 1s
删除悬停时更改字体大小,不要过度使用过渡,这两个应该足够了:
.carte-sample {
transition: transform 1s;
}
.carte-inner {
transition: opacity 1s;
}