Safari CSS 扫描动画效果不起作用

Question

背景：

所以我读了很多不同的文章，并讨论了 CSS3 动画在 Safari 上无法工作的堆栈溢出等问题。我尝试了其中的几个示例，例如添加前缀 -webkit- 使关键帧从 0% 变为 100%，甚至transform:translate3d(0,0,0) 触发硬件加速。我什至尝试按照某人的建议添加延迟，但不在当前的 JSFiddle 中。到目前为止没有任何效果，但我确信这是我错过的一件小事。

问题

CSS 动画不是我的强项，但是为什么我的圆圈跳到关键帧的末尾，而不是在我的 iPhone Safari/WKWebView 上以无限动画显示横扫横条的效果？它可以在我的带有 Chrome/Edge 的 Windows 设备上运行。

代码

// CSS
@-webkit-keyframes ios-sweep-test {
0% {
    cx: 5;
}

100% {
    cx: 100%;
}
}

@keyframes sweep {
from {
    cx: 5;
}

to {
    cx: 100%;
}
}

circle {
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-name: sweep;
animation-iteration-count: infinite;
animation-direction: alternate;
transform:translate3d(0, 0, 0)

-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-name: ios-sweep-test;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-transform: translate3d(0, 0, 0);
}

// HTML
<svg width="100%" height="20px">
                    <g transform="translate(0,10)">
                        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
                        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
                    </g>
                </svg>

JSFiddle

https://jsfiddle.net/2btz19qL/2/

图片

Answer 1

我更改了两件事以使其在 Safari 中正常工作：

• transform:translate3d(0, 0, 0)

  缺少

  ;

  ，这会产生 CSS 错误

• animation-name: sweep;

  在上半部分，但是

  -webkit-animation-name: ios-sweep-test;

  设置在下半部分，导致动画根本不起作用。

@keyframes sweep {
  from { cx: 5; }
  to { cx: 100%; }
}

circle {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-name: sweep;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform:translate3d(0, 0, 0);

  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: sweep;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-transform: translate3d(0, 0, 0);
}

<svg width="100%" height="20px">
    <g transform="translate(0,10)">
        <rect width="100%" height="2" y="-1" x="0" stroke="green" />
        <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" />
    </g>
</svg>