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 和默认 CSS 很长，所以我创建了一个 codepen 示例，可以在这里找到：

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

标签： safaricss-animations

Answer 1

介绍

我实际上会简化您的代码。我检查了兼容性表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;
    }
}