safari - CSS旋转，平移，缩放动画错误

Question

我已经使用关键帧为HTML/CSS3创建了动画。

动画是一个图标，该图标应该围绕其中心点旋转和缩放。

该动画可在Chrome中运行，但在Safari中，直到动画结束，它才能正确转换。

这是-定位到 safari 中的位置:



这是-平滑动画到位置-在 chrome 中:



这是动画CSS:

@keyframes icon-animation {
    0% {
        left: 188.5px;
        top: 187.5px;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
        width: 286.84px;
        height: 233.81px;
    }
    16.6667% {
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: 50% 50%;
    }
    50% {
        left: 188px;
        top: 188.5px;
    }
    66.6667% {
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
    100% {
        left: 188px;
        top: 188.5px;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: 50% 50%;
        width: 200px;
        height: 163px;
    }
}

HTML和Default CSS很长，因此我创建了一个Codepen示例，可以在这里找到:

https://codepen.io/traviskirton/pen/NLdKbb

Answer 1

尽管很可能是Safari特有的错误，但我个人不会对静态像素计算+顶部和左侧调整感到困惑。

您在这里所做的基本上是将图像尺寸减小30％。

您可以通过scale轻松实现相同目的。

简化动画版本，使其也可以在Safari中正常工作。

@keyframes icon-animation {
    0% {
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    100% {
      transform-origin: 50% 50%;
      transform: translate(-50%, -50%) rotate(0deg) scale(.70);
    }
}

如果没有 scale，则应尝试使用边距，但在Chrome或Firefox中可能会有不良行为。