為什么CSS影片（旋轉）在iOS15.4中不起作用

我有一個 SVG 圖示，并在 SVG 檔案中使用行內 CSS 應用了一些 CSS 影片（旋轉）（您可以在下面看到我的代碼并運行代碼片段）。

我的問題是，雖然影片在臺式機和我的 Android 手機中按預期作業，但在某些 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>

uj5u.com熱心網友回復：

最后，正如 A Haworth 所提到的，（360 度）似乎存在問題，但它也不適用于（359 度）或超過（180 度）的任何東西。

因此，我將影片更改為旋轉到（-360 度），并將元素的影片方向設定為“反轉”。

我再次發布更新的片段。

<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>

標籤：html css IOS 动画片 svg

上一篇：圍繞矩形路徑回圈SVG文本影片

下一篇：pyqtgrapgh：影像項不在GraphicsView的中心