滚动到时开始动画

我花了一整天的时间寻找一种简单的方法来让我的动画在滚动到页面上的特定位置后开始。

My css

.animation {
 width: 50%; 
 float: left; 
 position: relative; 
 -webkit-animation-name: test; 
 -webkit-animation-duration: 4s; 
 -webkit-animation-iteration-count: 3;
 -webkit-animation-fill-mode: forwards; 
 animation-name: test; 
 animation-duration: 4s; 
 animation-iteration-count: 1; 
 animation-fill-mode: forwards; }

还有我的 HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

我想知道当我滚动到类容器时如何使动画开始。

JavaScript

var $window = $(window);
var $elem = $(".animation")

function isScrolledIntoView($elem, $window) {
    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).on("scroll", function () {
    if (isScrolledIntoView($elem, $window)) {
        $elem.addClass("animate")
    }
});

HTML

<div class="container">
    <div class="animation">Content goes here...</div>
</div>

CSS

.animation.animate {
    animation: pulse 5s infinite;//change this to whatever you want
}

JSFiddle http://jsfiddle.net/toby3105/749yxgdk/2/玩（别忘了滚动）