CSS动画在Safari中触发时捕捉到结束状态

我正在用一个名为ScrollMagic的Wordpress插件构建我的公文包，并使用ScrollMagic触发CSS动画来显示scroll上的内容

在Chrome和Firefox中，一切都运行得非常好，但在Safari（Mac和iOS上）中，动画在触发时会直接捕捉到其最终状态

您可以在此处找到一个示例：

这用于触发动画：

jQuery(document).ready(function ($) {
var controller = new ScrollMagic.Controller();
$.each($('.has-animation'), function (index) {
var scene = new ScrollMagic.Scene({
triggerElement: this
})
.setClassToggle(this, "on-screen")
.addTo(controller);   
scene.addIndicators();
});
});

这用于设置内容的动画（使用animate.css）：

#测试3{
-webkit动画播放状态：暂停；
动画播放状态：暂停；
}
.屏幕上#测试3{
-webkit动画播放状态：正在运行；
动画播放状态：运行；
}
测试淡入度

如果有任何帮助，我将不胜感激，因为我已经为这个问题苦苦挣扎了数周，现在无法找到解决方案

提前谢谢

提洛

<div class="has-animation">
<style type="text/css">
#test3{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

.on-screen #test3{
-webkit-animation-play-state: running;
animation-play-state: running;
}
</style> 

<div id="test3" class="animated fadeInDown">
<p data-line-height="50px" data-font-size="50px" style="text-align: center;"><span style="letter-spacing:0.5px;"><span class="semibold"><span class="bold">TEST FADE</span></span></span></span></span></p>
</div>
</div>