FadeInUp css动画不起作用

Question

我试图创建一个CSS动画，当你将鼠标悬停在该框上时，它会使用CSS动画显示div。我已经使用以下网站作为参考。 click here但是我似乎无法实现efx。在我的网站上，我已经使用JqUERY来显示和隐藏功能，但是我的addClass和RemoveClass工作正常，但是总体上这个功能并不能正常工作。有人能指引我朝着正确的方向发展吗？

/** HTML * */

div class="box"> 
     <div class="trigger">hhh</div> 
      <div class="overlay"> 
       <h1>box 1</h1> 
      </div> 
     </div> 

<div class="box"> 
<div class="trigger">hhh</div> 
     <div class="overlay"> 
      <h1>box 1</h1> 
     </div> 
    </div> 

<div class="box"> 
<div class="trigger">hhh</div> 
    <div class="overlay"> 
      <h1>box 1</h1> 
     </div> 
    </div> 

/* jQuery的**/

     $(".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"); 
      }); 

/** CSS动画**/

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

Answer 1

尝试使用您提供的css类，并将第二个参数传递给“addClass”调用，以指示其应该生成动画的毫秒数。例如：

$(".trigger").hover(function(){ 
    var $this = $(this); 
    $this.next(".overlay").addClass("fadeInDown", 1000); 
}); 

Answer 2

添加以下css和HTML标记。

HTML代码： -

<h1 class="animated fadeInUp" >Example</h1> 

CSS代码： -

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
@keyframes fadeInUp { 
    from { 
    opacity: 0; 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
    } 

    to { 
    opacity: 1; 
    -webkit-transform: none; 
    transform: none; 
    } 
} 

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