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