时间戳

首页 > 解决方案 > 同时使用 css 动画比例和 css 过渡的 Safari 浏览器错误

css - 同时使用 css 动画比例和 css 过渡的 Safari 浏览器错误

问题描述

我创建了一个带有动画的新登录表单此登录表单在连接的每个阶段都有动画

我的动画适用于除 Safari 之外的所有浏览器（Chrome、Edge、Opera、Brave、Firefox）。但实际上，如果我在 Safari 浏览器检查器中停用并重新激活关键帧（和 -webkit），则 css 工作得很好。直到现在我还没有设法找到解决方案。

我尝试使用 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);
  }
}

标签： cssdebuggingsafariscale

解决方案

已解决的问题：Safari 不能同时使用变换缩放动画和过渡。我必须删除 transition:1s all; 到.submit-btn img。

推荐阅读