когда я использую как transition
и transform
, анимации не очень гладкие как на chrome
и на firefox
. Он размывается, когда вы наводите на него курсор. Единственным браузером, на котором это нормально, является IE
.
Chome/FireFox (обратите внимание на текст, когда начинается анимация, он начинает размываться. Когда он заканчивается, он возвращается к гладким буквам.)
Желаемый результат (работает в IE)
Как сделать эти анимации также гладкими на chrome
и firefox
?
Snippet:
как только переход завершен, элемент должен снова сфокусироваться. То, что теперь выглядит на 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>