Animation when adding a class not working

Question

I have a JQuery and CSS3 snippet to create a "scrolled into view animation". What's suppose to happen is it doesn't start the animation unless the class animated has the class visible. What keeps happening though is it adds the class visible but the animation doesn't trigger. I've tested this in all browsers and the only one that seems to do it correctly is Safari. I'd like to make this cross-browser compatible. Any help would be great!

Here is a fiddle of the snippet: http://jsfiddle.net/M6VLL/

Here is the JS:

(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery)

jQuery(window).scroll(function(event) {

  jQuery(".animated").each(function(i, el) {
    var el = jQuery(el);
    if (el.visible(true)) {
      el.addClass("visible"); 
    }
  });

});

And here is the CSS:

.animated { opacity: 0;}
.animated.visible {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 1;
}
@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

Answer 1

You can see what is your problem using the dev tools.

You set initially:

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

and your idea is that this won't do anything because you haven't set the remaining porperties.

But, if you look at the real properties (with dev tools), you will see that the remaining properties are set to

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: slideInLeft;
-webkit-animation-play-state: running; 

That means that the animation is already running !!

When you set the .visible class, then you change some of the animation properties, but it's too late, the animation has already finished.

Answer 2

You don't need an animation for this, you can just use transitions. I'd also use translateX(-100%) rather than what you have so you're sure it goes the necessary amount and never goes further than it has to. To make it cross browser you just have to add the other prefixes. I also used an else statement to make it go back to its default location when the page is scrolled up or down

Demo