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和默认CSS比较长，所以我创建了一个Codepen示例，可以在此处找到：

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

- C4 - Travis

---

供应商前缀？https://stackoverflow.com/questions/30688908/transform-origin-doesnt-apply-in-safari - mchl18

@C4 - Travis，请查看兼容性表格，了解有关https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin的信息。 - Menelaos

@undefinedMayNotBeNull 尝试了。 - C4 - Travis

Answer 1

尽管这可能是Safari特有的bug，但我个人不会过分干扰静态像素计算和顶部和左侧调整。

你基本上在那里减小图像尺寸30%。

您可以通过“缩放”轻松实现相同效果。

以下是您动画的简化版本，在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 中产生不良行为。

- Andrea Giammarchi

---

规模方法可能对我们可行也可能不可行。我们有一些严格的限制要求我们按特定方式编写代码。在您的答案和@menelaos-bakopoulos之间可能有一个折中解决方案。 - C4 - Travis

Answer 2

介绍

我实际上会简化你的代码。我查看了 transform-origin 的兼容性表，它与 Safari 并不完全匹配。有一个关于 transform-origin svg support 的疑问，而且还需要添加一个 -webkit- 前缀，这使得你想要的简单效果变得非常复杂。

参见：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

我通过注释各种内容（以及修改某些关键帧的左/上值）就能获得完全相同的效果。并且在 Safari 和 Chrome 中都可以完美运行。

示例 - 在线

我在我的移动 Safari 上测试了你的示例和我的示例： https://codepen.io/menelaosbgr/pen/pOpXbB

代码：

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

- Menelaos

---

嘿，谢谢。实际上，我们在编写CSS方面有一些严格的限制，这就是为什么我特别询问我上面发布的方法的原因。也许在你的答案和@andrea-giammarchi的想法之间有一个折中方案。我需要进行实验。 - C4 - Travis