title: How to Trigger css animation both on scrolling down and up
body: <p>I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.</p>
  
  <p>CSS</p>
  
  <pre><code>.slideRight{
  
      animation-name: slideRight;
      -webkit-animation-name: slideRight; 
  
      animation-duration: 1.5s;   
      -webkit-animation-duration: 1.5s;
  
      animation-timing-function: ease-in-out; 
      -webkit-animation-timing-function: ease-in-out;     
  
      visibility: visible !important; 
  
  }
  
  @keyframes slideRight {
  
      0% {
          transform: translateX(-150%);
      }
      50%{
          transform: translateX(8%);
      }
      65%{
          transform: translateX(-4%);
      }
      80%{
          transform: translateX(4%);
      }
      95%{
          transform: translateX(-2%);
      }               
      100% {
          transform: translateX(0%);
      }   
  
  }
  
  @-webkit-keyframes slideRight {
  
      0% {
          -webkit-transform: translateX(-150%);
      }
      50%{
          -webkit-transform: translateX(8%);
      }
      65%{
          -webkit-transform: translateX(-4%);
      }
      80%{
          -webkit-transform: translateX(4%);
      }
      95%{
          -webkit-transform: translateX(-2%);
      }           
      100% {
          -webkit-transform: translateX(0%);
      }
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="animation-test element-to-hide" style="visibility:visible;"&gt;Something&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(window).scroll(function() {
  
      $('.animation-test').each(function(){
  
          var imagePos = $(this).offset().top;
  
          var topOfWindow = $(window).scrollTop();
  
          if (imagePos &lt; topOfWindow+400) {
              $(this).addClass("slideRight");
          }
  
      });
  
  });
  
  $('.element-to-hide').css('visibility', 'hidden');
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ozww5cvj/3/" rel="noreferrer"><strong>JSFiddle</strong></a></p>