title: Activate CSS3 keyframe animation when the content scrolls into view
body: <p>I have been trying to figure out how to have animations occur when it is scrolled into view but with little to no luck. I found a JQuery plugin "Waypoints" but I lack the skills to utilize it. I am trying to use CSS3 keyframes that animate when they are scrolled into view. I made a breakthrough and am close to what I want to accomplish but it isn't quite where I want it. I have a class named "bounceinright" that makes the item bounce in to the right of the screen. Here is the CSS for that:</p>
  
  <pre><code>@-webkit-keyframes bounceinright {
  0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
  }
  
  60% {
      opacity: 1;
      -webkit-transform: translateX(-30px);
  }
  
  80% {
      -webkit-transform: translateX(10px);
  }
  
  100% {
      -webkit-transform: translateX(0);
  }
  }
  
  @-moz-keyframes bounceinright {
  0% {
      opacity: 0;
      -moz-transform: translateX(2000px);
  }
  
  60% {
      opacity: 1;
      -moz-transform: translateX(-30px);
  }
  
  80% {
      -moz-transform: translateX(10px);
  }
  
  100% {
      -moz-transform: translateX(0);
  }
  }
  
  @-o-keyframes bounceinright {
  -o-transform: translateX(2000px);
  }
  
  60% {
  opacity: 1;
  -o-transform: translateX(-30px);
  }
  
  80% {
  -o-transform: translateX(10px);
  }
  
  100% {
  -o-transform: translateX(0);
  }   
  }
  
  @keyframes bounceinright {
  0% {
      opacity: 0;
      transform: translateX(2000px);
  }
  
  60% {
      opacity: 1;
      transform: translateX(-30px);
  }
  
  80% {
      transform: translateX(10px);
  }
  
  100% {
      transform: translateX(0);
  }
   }
  
  .bounceinright {
  display: none;
  }
  
  .bounceinright.start {
  -webkit-animation: bounceinright 1s ease-out forwards;
  -moz-animation: bounceinright 1s ease-out forwards;
  -ms-animation: bounceinright 1s ease-out forwards;
  -o-animation: bounceinright 1s ease-out forwards;
  animation: eigbounceinrighthty 1s ease-out forwards;
  display: block;
  }
  </code></pre>
  
  <p>and then I have a little JQuery snippet that will trigger the animation with the class "start" when it is scrolled to.</p>
  
  <pre><code> ////////////////////////////////
   //scroll events
   ////////////////////////////////       
  function isElementInViewport(elem) {
  var $elem = $(elem);
  
  // Get the scroll position of the page.
  var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
  var viewportTop = $(scrollElem).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  
  // Get the position of the element on the page.
  var elemTop = Math.round( $elem.offset().top );
  var elemBottom = elemTop + $elem.height();
  
  return ((elemTop &lt; viewportBottom) &amp;&amp; (elemBottom &gt; viewportTop));
  }
  
  // Check if it's time to start the animation.
  function checkAnimation() {
      var $elem = $('.row .wpb_content_element');
  
      // If the animation has already been started
      if ($elem.hasClass('start')) return;
  
      if (isElementInViewport($elem)) {
          // Start the animation
          $elem.addClass('start');
      }
  }
  
  // Capture scroll events
  $(window).scroll(function(){
      checkAnimation();
  });
  </code></pre>
  
  <p>my problem though is that when one item with "bounceinright" is scrolled to, it triggers ALL of the items with the same class. I was wondering if there was a way to have them trigger individually but with the same class. Any help would be appreciated.</p>
  
  <p>Thank you!</p>