动画持续时间在 Safari 中的行为不正常答案

【问题标题】：Animation duration not behaving properly in Safari动画持续时间在 Safari 中的行为不正常
【发布时间】：2019-12-09 08:36:13
【问题描述】：

我们正在开发一个使用 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);}
        }

在 safari 中，它会运行一次，之后对象会以其原始比例保持静止。

我们尝试了几种不同的方法来定义webkitAnimationDuration;，例如["-webkit-animation-duration"]

您的帮助将不胜感激！

【问题讨论】：

你在你的css代码中使用了-webkit-keyframes吗？如果是这样，您能否也包括在内？

标签： javascript css animation safari css-animations

【解决方案1】：

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

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

通过短暂隐藏，然后显示元素，Safari 将使用新的动画持续时间呈现它。

【讨论】：

【解决方案2】：

将此用于 Safari：

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

【讨论】：

嘿，哈莉唵！最初，这很有帮助！它现在实际上接管了适当的速度，但是当我们用新数据 ping 它时它拒绝这样做。这很奇怪，因为它确实适用于所有其他浏览器！