Q:

Animation when adding a class not working

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;
}

A:

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.

