当我同时使用
transition
和transform
时,动画在chrome
和firefox
上都不太平滑。当你将鼠标悬停在上面时,它会变得模糊。唯一正常的浏览器是IE
。Chome / FireFox(请注意文本,在动画开始时开始变得模糊。当它完成时,它会弹回到平滑的字母。)
我如何使这些动画在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>