Question

我有一个div元素，该元素具有启动页面时要播放的动画。当我将鼠标悬停在上面时，我想让它播放另一个动画。效果很好，但是当我将鼠标移出div元素时，它将再次播放开始动画（从屏幕外渐入）。

@keyframes div{
   0%{
     opacity: 0;
   }
}
@keyframes divHover{
   50%{
      top: 200px;
   }
   100%{
      top: 0px;
   }
}
#div{
   opacity: 1;
   animation: div 1s;
   position: absolute;
   left: 0px;
   top: 0px;
}
#div:hover{
   animation: divHover 1s linear 0s infinite;
}

   <div id="div"> abc </div>

预期： Div开始不可见并逐渐淡入。将div悬停时，它会上下移动，并在悬停时继续执行。停止悬停后，div停止动画并保持其完全不透明

实际：停止悬停后，div停止动画，但返回到0透明度，然后花一秒钟再次显示开始的动画。

https://jsfiddle.net/odq125Lu/6/

Answer 1

该问题是由于您要用 up和down 覆盖第一个 opacity 动画，然后在您悬停时再次激活第一个动画。 / p>

您可以使用多个动画，并考虑animation-play-state来激活第二个动画：

@keyframes div {
  0% {
    opacity: 0;
  }
}

@keyframes divHover {
  50% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

#div {
  opacity: 1;
  animation: 
    div 1s,
    divHover 1s linear 0s infinite;
  animation-play-state:running,paused;
  position: absolute;
  left: 0px;
  top: 0px;
  background:red;
  padding:20px;
}

#div:hover {
  animation-play-state:running,running;
}

<div id="div"> abc </div>

Answer 2

我不是专家，但可能与您没有为动画“ divHover”设置100％的值有关吗？

<script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - 
        loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth 
    / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
    }
    $('form').live("submit", function () {
    ShowProgress();

    });

  </script>
<style type="text/css">
    body { 
margin:0;
   }
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
  }
.loading
{
      display : none;
position : fixed;
z-index: 100;

 background-color:#666;
opacity : 0.9;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
color:white;
}

.center {
position: absolute;

width: 100px;
height: 50px;
top: 50%;
left: 51%;
margin-top: -25px;
margin-left: -50px;
font-weight:bold;
 }

.spinner {
  margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
position: absolute;
width: 100px;
height: 50px;
top: 65%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
  }

  .spinner > div {
 background-color: white;
 height: 100%;
  width: 6px;
 display: inline-block;
  color:white;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
 animation: sk-stretchdelay 1.2s infinite ease-in-out;

   }

   .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
   color:white;
    }

   .spinner .rect3 {
   -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
     color:white;
    }

       .spinner .rect4 {
     -webkit-animation-delay: -0.9s;
     animation-delay: -0.9s;
     color:white;
     }

       .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
     animation-delay: -0.8s;
      color:white;
       }

    @-webkit-keyframes sk-stretchdelay {
     0%, 40%, 100% { -webkit-transform: scaleY(0.4);-webkit-overflow- 
     scrolling: 
    touch; }  
   20% { -webkit-transform: scaleY(1.0);-webkit-overflow-scrolling: touch; 
           }
    }

   @-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
   -webkit-transform: scaleY(0.4);
   -webkit-overflow-scrolling: touch;
    }  20% { 
    transform: scaleY(1.0);
   -webkit-transform: scaleY(1.0);
   -webkit-overflow-scrolling: touch;
      }
    }

    </style> 

   <body>
     <div class="loading">
       <div class="spinner">
   <div class="rect1"></div>
   <div class="rect2"></div>
   <div class="rect3"></div>
   <div class="rect4"></div>
    <div class="rect5"></div>
   </div>
   <p class ="center">Collecting Your Slides</p>

    </div>
     </body>

我需要在CSS中使用两个动画，一个在开始时，一个在悬停时，但是它不起作用

2 个答案: