我有一些图像,其中一个类由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/Muñ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/Muñ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/Muñ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/Muñ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>