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

一百:

所以我读了一堆关于CSS3动画不能在Safari上工作的不同的文章和堆栈溢出，等等.我try 了几个这样的例子，比如添加前缀-Webkit-使关键帧从0%到100%，甚至Transform:Translate3d(0，0，0)来触发硬件加速.我甚至try 过按某人的建议添加延迟，但不在当前的JSFidel中.到目前为止，一切都没有奏效，但我肯定这是我遗漏的一件小事.

Question

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

Code个

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

Image个