css - 具有转换问题的 SVG CSS 关键帧动画( 和 )

Question

我正在处理一个(简单的)加载图像，该图像使用 SVG 和一些 CSS 动画 制作。它在 Chrome 和 Firefox 上运行良好，但我似乎无法在 Safari 上运行。

这是 Safari (11.0.1) 的东西，还是我遗漏了什么？一个简单的 SVG 矩形动画很好，但文本什么都不做......

如果有人能提供帮助，我们将不胜感激。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 300" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <style>
        .oeps {
            font-family: 'SketchRockwell', 'Sketch Block', sans-serif;
            font-size: 120px;
        }
        .balk {
            -webkit-animation: vallen 1s ease-in-out infinite;
            animation: vallen 1s ease-in-out infinite;
        }
        .tekst1 {
                -webkit-animation: vallen 1s ease-in-out infinite;
                animation: vallen 1s ease-in-out infinite;
            }
        @keyframes vallen {
            0% { transform: translate(0px, 0px)}
            50% { transform: translate(20px, 0px)}
            100% { transform: translate(0px, 200px)}
        }
    </style>
    <rect x="0" y="0" width="1400" height="340" fill="rgb(227,6,19)"/>
    <g class="oeps" style="transform: translate(700px, 60px);">
        <text class="tekst1" x="-200" y="120" fill="white">O</text>
        <rect class="balk" x="-200" y="80" width="75" height="4" fill="#ffffff" stroke="#494949"/>
    </g>
</svg>

Answer 1

我看到您正在使用动画 CSS 属性的前缀版本:-webkit-animation。当你这样做时，你还需要使用 @keyframes 的前缀版本:

@-webkit-keyframes vallen {
   ..etc..
}

现在我不确定您使用的 Safari 版本是否支持这些属性的无前缀版本，但请尝试一下。也许这是你的问题。