title: FadeInUp css animation not working
body: <p>I made attempts to create a CSS animation, when you hover over the box, it reveals the div using CSS animations. I have used the following site as reference. <a href="http://daneden.me/animate/" rel="nofollow">click here</a> however i can't seem to achieved the efx. On my site i have use JqUERY for a show and hide function, my addClass and RemoveClass works however overall the function isn't working how it should do. Can someone guide me in the right direction. </p>
  
  <p>/<strong>** HTML <em>*</em>*</strong>/</p>
  
  <pre><code>div class="box"&gt;
          &lt;div class="trigger"&gt;hhh&lt;/div&gt;
              &lt;div class="overlay"&gt;
                  &lt;h1&gt;box 1&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;div class="box"&gt;
  &lt;div class="trigger"&gt;hhh&lt;/div&gt;
        &lt;div class="overlay"&gt;
              &lt;h1&gt;box 1&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="box"&gt;
  &lt;div class="trigger"&gt;hhh&lt;/div&gt;
      &lt;div class="overlay"&gt;
              &lt;h1&gt;box 1&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>/<em>*</em> jquery **/</p>
  
  <pre><code>                     $(".overlay").addClass("visible");
          $(".overlay").removeClass("visible");
              $(".trigger").hover(function(){
                  var $this = $(this);
                  $this.next(".overlay").addClass("visible");
              }); 
  
              $(".trigger").mouseleave(function(){
                  var $this = $(this);
                  $this.next(".overlay").removeClass("visible");
              }); 
  </code></pre>
  
  <p>/<strong>** CSS ANIMATION **</strong>/</p>
  
  <pre><code>.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  
  -moz-animation-duration: 1s;
  -moz-animation-delay: 2s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  
  -o-animation-duration: 1s;
  -o-animation-delay: 2s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-fill-mode: both;
      }
  
  
       @-webkit-keyframes fadeInDown {
  0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
  }
  
  100% {
      opacity: 1;
      -webkit-transform: translateY(0);
  }
        }
  
  
       .fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  
  -moz-animation-duration: 1s;
  -moz-animation-delay: 2s;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: both;
  
  -o-animation-duration: 1s;
  -o-animation-delay: 2s;
  -o-animation-timing-function: ease;
  -o-animation-fill-mode: both;
  
  animation-duration: 1s;
  animation-delay: 2s;
  animation-timing-function: ease;
  animation-fill-mode: both;
          }
  
        @-Webkit-keyframes fadeInUp {
  0% {
      opacity: 0;
      -moz-transform: translateY(20px);
  }
  </code></pre>