Safari浏览器同时使用css动画缩放和css过渡错误

Question

我已经创建了一个新的带有动画的登录表单这个登录表单在连接

的每个阶段都是动画的。我的动画工作在所有浏览器(Chrome, Edge, Opera, Brave, Firefox)除了Safari。但实际上css工作完美，如果我停用和重新激活关键帧(和-webkit)在Safari浏览器检查器。到现在我还没能找到解决办法。

我尝试使用css "zoom"，但它不适用于动画。当你填写登录名(几乎8个字符)和密码(几乎10个字符)=选中的图标必须在正常位置和缩放动画。

你能帮我吗?

.submit-btn img {
position: absolute;
height: 100%;
width: 100%;
right: 0;
transform: scale(0.3) rotate(0deg);
transition: 1s all;
}
.validated_img {
-webkit-animation: 1s linear 0s infinite alternate animcheck;
animation: 1s linear 0s infinite alternate animcheck;
cursor:pointer;
}
@-webkit-keyframes animcheck {
from {
-webkit-transform: scale(0.3) rotate(0deg);
}
to {
-webkit-transform: scale(0.4) rotate(0deg);
}
}
@keyframes animcheck {
from {
transform: scale(0.3) rotate(0deg);
}
to {
transform: scale(0.4) rotate(0deg);
}
}

Answer 1

问题解决:Safari不能同时使用缩放动画和过渡。我不得不删除所有的过渡段;.submit-btn img.