CSS旋转,翻译,缩放动画Bug

Question

我使用关键帧为HTML/CSS3创建了一个动画.

动画是一个图标,应该旋转并围绕其中心点缩放.

动画可以在Chrome中使用,但在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

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 中产生不良行为。