The behaviour you had was because you gave the '.animated' class from the start, and the animation was terminated before you arrived to the elements.
Please note that you need to modify the html and css code also to use the animation as you want.
Please see the following demo which runs multiple animations.
JS:
var animations = ['animated', 'animated-right'];
var i = 0;
$(window).scroll(function() {
$elem = $('.hidden:first');
var imagePos = $elem.offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
var animationClass = animations[i % 2 == 0 ? 1 : 0];
$elem.removeClass("hidden")
.addClass(animationClass);
i++;
}
});
CSS
.hidden { visibility: hidden;}
.vertical-slide {
border: 1px solid #000;
height: 500px;
}
.animated,
.animated-right{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes animated {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes animated {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translatex(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.animated {
-webkit-animation-name: animated;
animation-name: animated;
}
.animated-right {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
HTML:
<div class="vertical-slide">
<article>
<h1 class="animated">1</h1>
</article>
</div>
<div class="vertical-slide">
<article>
<h1 class="hidden">2</h1>
</article>
</div>
<div class="vertical-slide">
<article>
<h1 class="hidden">3</h1>
</article>
</div>
<div class="vertical-slide">
<article>
<h1 class="hidden">4</h1>
</article>
</div>
<div class="vertical-slide">
<article>
<h1 class="hidden">5</h1>
</article>
</div>