为什么 CSS 动画（旋转）在 iOS 15.4 中不起作用

Question

我有一个 SVG 图标，我在 SVG 文件中使用内联 CSS 对其应用了一些 CSS 动画（旋转）（下面你可以看到我的代码和运行片段）。

我的问题是，虽然动画在桌面和我的 Android 移动设备 phone 中按预期工作，但它在某些 iPhone 秒后无法工作。

例如，我发现如果更新到 iOS 15.4，它在 iPhone 11 中不起作用，但如果它在版本 15.3 中，它就可以工作。我还尝试使用 15.3 中的 iPad 并且它可以工作，并且在更新到 15.4 后它停止工作。

我是不是遗漏了什么，或者这只是 iOS 15.4 的一个错误？

谢谢！

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570" class="hero-slider__svg-animation" width="160">
    <style>
    .hero-slider__svg-animation {
        -webkit-animation: heroSliderSvgAnimation 1s linear infinite;
        animation: heroSliderSvgAnimation 1s linear infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    @-webkit-keyframes heroSliderSvgAnimation {
        0% {
            -webkit-transform: rotate(0);
            -webkit-transform-origin: center;
        }
    }
    @-webkit-keyframes heroSliderSvgAnimation {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform-origin: center;
        }
    }
    @keyframes heroSliderSvgAnimation {
        0% {
            transform: rotate(0);
            transform-origin: center;
        }
    }
    @keyframes heroSliderSvgAnimation {
        100% {
            transform: rotate(360deg);
            transform-origin: center;
        }
    }
    </style>
    <path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>

Answer 1

最后，正如 A Haworth 提到的，(360deg) 似乎存在问题，但它也不适用于 (359deg) 或超过 (180deg) 的任何东西。

所以我将动画更改为旋转 (-360deg)，并将元素的动画方向设置为“反转”。

我再次 post 更新了代码段。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570" class="hero-slider__svg-animation" width="160">
    <style>
    .hero-slider__svg-animation {
        -webkit-animation: heroSliderSvgAnimation 1s linear infinite;
        animation: heroSliderSvgAnimation 1s linear infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: reverse;
        animation-direction: reverse;
    }

    @-webkit-keyframes heroSliderSvgAnimation {
        0% {
            -webkit-transform: rotate(0deg);
            -webkit-transform-origin: 50% 50%;
        }
        100% {
            -webkit-transform: rotate(-360deg);
            -webkit-transform-origin: 50% 50%;
        }
    }
    @keyframes heroSliderSvgAnimation {
        0% {
            transform: rotate(0deg);
            transform-origin: 50% 50%;
        }
        100% {
            transform: rotate(-360deg);
            transform-origin: 50% 50%;
        }
    }
    </style>
    <path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>

Answer 2

是的，IOS 15.4 中存在一个错误，我们在使用转换属性时遇到了内容隐藏问题，因此为了克服这个问题，我们刚刚在 [=12= 中添加了 translate3d() ]

为什么 CSS 动画（旋转）在 iOS 15.4 中不起作用

Why CSS animation (rotate) does not work in iOS 15.4

html

css

ios

animation

svg