javascript - Safari没有在css动画上方重新绘制元素

Question

我的代码如下所示：

var text = document.getElementById('text');
var toggle = true;

setInterval(function(){
    if (toggle){
       text.innerHTML = 'text1';
    } else {
       text.innerHTML = 'text2';
    }
    toggle = !toggle;
}, 500)

#text{
    position: relative;
    background-color: white;
    z-index: 2;
    padding: 0 10px;

}
#marqueeContainer{
    z-index: 1;
}
@keyframes marquee{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
#marquee {
    animation: marquee 10s linear infinite;
    display: inline-block;

}

<span id="text">
    text
</span>
    
<span id="marqueeContainer">
    <span id="marquee">
        marquee 
        marquee 
        marquee 
        marquee 
        marquee 
    </span>
</span>

或看这里： https ://codepen.io/jacquesknie/pen/ZEExZNy

有一个用 setInterval 切换的文本，一旦在 Safari 下运行动画，它就不会更新/重新绘制文本。Chrome 和 Firefox 运行良好。发生了什么事，我是否忽略了一些明显的东西？

非常感谢，雅克

标签： javascripthtmlcsssafari

Answer 1

在 Safari 上，您必须使用

@-webkit-keyframes

请参阅https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html