淡入淡出css动画不起作用

FadeInUp css animation not working

本文关键字：不起作用 动画 css 淡出 淡入      更新时间：2023-09-26

我尝试创建一个CSS动画，当你将鼠标悬停在框上时，它会使用CSS动画显示div。我使用了以下网站作为参考。点击这里，但我似乎无法实现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);
}

添加以下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;
}

尝试使用您提供的css类，并向"addClass"调用传递第二个参数，指示它应该动画化的毫秒数。例如：

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