我使用名为Semplice的Wordpress插件构建我的投资组合，并使用ScrollMagic触发CSS动画以显示滚动内容。
一切都在Chrome和Firefox中运行得非常好，但在Safari（Mac和iOS）上，动画会在触发时直接进入最终状态。
您可以在此处找到示例：http://tilokrueger.com/work/fade/
这用于触发动画：
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）：
<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>
任何帮助都会非常感激，因为我几周来一直在努力解决这个问题而无法找到解决方案。
提前致谢！
的Tilo