FadeInUp css动画无法正常工作 [英] FadeInUp css animation not working

问题描述

我尝试创建一个CSS动画，当你将鼠标悬停在框上时，它会使用CSS动画显示div。我使用以下网站作为参考。 点击此处，但我似乎无法实现efx。在我的网站上，我使用JqUERY进行显示和隐藏功能，我的addClass和RemoveClass可以工作，但总体而言，该功能无法正常工作。有人能引导我朝着正确的方向前进。

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. click here 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.

/ ** HTML * * /

/** 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 ** /

/* 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 ANIMATION ** /

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

推荐答案

尝试使用css类你提供了，并将第二个参数传递给addClass调用，指示它应该设置动画的毫秒数。例如：

Try using the css classes that you have provided, and pass a second parameter to the "addClass" call indicating the number of milliseconds that it should animate. For example:

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

这篇关于FadeInUp css动画无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！