CSS动画在悬停时触发多次答案

【问题标题】：CSS animation acting multiple times when fired on hoverCSS动画在悬停时触发多次
【发布时间】：2020-06-18 04:24:44
【问题描述】：

我有一个非常简单但非常烦人的问题。我有一个带有类卡的 div，在悬停时，它应该运行一个简单的动画来旋转 3d(360deg) 整个 div。

.card:hover{
    animation: fullTurn 1s;
    animation-iteration-count: 1;
}

@keyframes fullTurn{
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}

当我将鼠标悬停在 div 上时，我希望它以 3d 样式简单地将整个 div 旋转 360 度。实际发生的事情是，当我将鼠标悬停在 div 上时，动画开始，在中间停止并重新开始。它发生了很多次，一段时间后，它按预期完成了动画。我希望它一次性完成动画。

【问题讨论】：

codepen 复制会很棒。

标签： html css css-animations

【解决方案1】：

好吧，帕尼特·迪克西特，使用您提供的给定信息。我相信问题在于动画是如何触发的，你制作了一个动画以在 y 轴上悬停，所以在某个特定时刻，div 在动画之间失去了与鼠标指针的接触，当动画再次开始时，所以你需要改变动画的触发事件，而不是像“onClick”这样的悬停

【讨论】：

【解决方案2】：

好吧！我终于找到了解决方案。由于@GautamSaharan 所述的原因，提出了这个问题。

我认为问题在于动画是如何触发的，您制作了一个动画以围绕 y 轴悬停，因此在特定时刻 div 在动画之间失去与鼠标指针的接触，并且当动画重新开始。

为了解决这个问题，我做了一个外部 div 并将现有的 div 放在里面。

<div class="outerDiv">
     <div class="card">
          <!--The content of the div-->
     </div>
</div>

现在，稍微更新一下 CSS 后，一切正常。

.outerDiv:hover .card{
    animation: fullTurn 2s;
    animation-iteration-count: 1;
}

@keyframes fullTurn{
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}

悬停在外层 div 上时，内层 div 会旋转，但光标的接触不会中断。

【讨论】：