Question

we're working on a simple project, where we're using CSS animation. We're trying to change the animation duration with JavaScript. Changing the animation duration works in every browser except safari and iOS.

We're using this code to change the animation duration.

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

And this is the 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);}
    }

On safari it runs one time, after that the object stays stationary in it's original proportion.

we tried several different ways of defining the webkitAnimationDuration; for instance like : ["-webkit-animation-duration"]

Your help would be appreciated!

Answer 1

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

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

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

Answer 2

将此用于Safari：

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

animation duration not behaving properly in Safari

2 个答案: