动画时长在Safari中表现不正常

Question

我们正在一个简单的项目中使用CSS动画。我们正在尝试使用JavaScript更改动画持续时间。更改动画的持续时间适用于Safari和iOS以外的所有浏览器。

我们正在使用此代码来更改动画持续时间。

document.getElementById("circle").style.animationDuration = data.pulse+"ms"
document.getElementById("circle").style.webkitAnimationDuration = data.pulse+"ms"

这是css：

 @keyframes pulse {       
        0% {transform: scale(0); opacity: 0;}
        30% {opacity: 1;}   
        100% {opacity: 0; transform: scale(0.8);}
    }

    @-webkit-keyframes pulse {       
        0% {-webkit-transform: scale(0); opacity: 0;}
        30% {opacity: 1;}   
        100% {opacity: 0; -webkit-transform: scale(0.8);}
    }

    @-moz-keyframes pulse {       
        0% {-moz-transform: scale(0); opacity: 0;}
        30% {opacity: 1;}
        100% {opacity: 0; -moz-transform: scale(0.8);}
    }

在野生动物园中运行了一次，之后物体以其原始比例静止不动。

我们尝试了几种不同的方法来定义webkitAnimationDuration；例如：[“ -webkit-animation-duration”]

您的帮助将不胜感激！

Answer 1

将此用于Safari：

document.getElementById("circle").style.WebkitAnimationDuration = data.pulse+"ms"
// Code for Chrome, Safari, and Opera

Answer 2

我也遇到了这个问题，并通过在更改动画持续时间后强制Safari重新渲染元素来解决它。

var circle = document.getElementById("circle");
circle.style.animationDuration = data.pulse+"ms";
circle.style.display = "none";
setTimeout(() => circle.style.display = "block", 0);

通过短暂隐藏，然后显示该元素，Safari将以新的动画持续时间对其进行渲染。