Question

我有一些图像，其中一个类由Intersection Observer动态添加到它们，以在用户滚动到它们时触发翻译动画。我只是将该类添加到此代码段中的图像中。

在每张图像上，我还有一个:hover动画，使它们具有“嗡嗡”效果。

但是，当用户将鼠标移出父级div时，将重播第一个动画。看来我在两个动画之间都有冲突。

如何避免这种情况？

.floating {
  width: 150px;
  height: 220px;
}

.show-bottom {
  animation: movefromtop 1s alternate;
}

@keyframes movefromtop {
  from { transform: translateY(-5em); }
  to { transform: translateY(0em); }
}

.icons-info > *:hover .floating { 
  animation: buzz 0.15s linear infinite;
}

@keyframes buzz {
  from { transform: translateX(3px) rotate(2deg); }
  to { transform: translateX(-3px) rotate(-2deg); }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<section id="staff">
  <div class="col-lg-12 mx-auto mb-5">
    <div class="container">
      <div class="row icons-info">
        <div class="col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating show-bottom" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
        <div class="col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating show-bottom" src="https://lagaleramagazine.es/rucab/img/Muñeco 2-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating show-bottom" src="https://lagaleramagazine.es/rucab/img/Muñeco 3-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-xs-6 col-sm-6 col-md-6 col-lg-3">
          <img class="floating show-bottom" src="https://lagaleramagazine.es/rucab/img/Muñeco 1-08.png">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
      </div>
    </div>
  </div>     
</section>

避免在鼠标移开时重置动画

0 个答案: