鼠标悬停时的 CSS3 动画答案

【问题标题】：CSS3 Animate on mouse over鼠标悬停时的 CSS3 动画
【发布时间】：2015-11-08 21:25:39
【问题描述】：

我写过这样的动画代码：

    .bounce {
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0s;
   animation-iteration-count: 0;
   animation-direction: alternate;
   animation-play-state: paused;
}
.bounce:hover {
    animation-play-state:running;
   animation-iteration-count: 1;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}

并将“反弹”类分配给我页面上的按钮。当我将鼠标悬停在它上面时，它有一个漂亮的小弹跳动画，但是当我再次将鼠标悬停在它上面时，它就不会播放了。每次将鼠标悬停在它上面时，我该怎么做才能让它弹跳？

【问题讨论】：

尝试删除animation-iteration-count: 1;。您不会在悬停时删除动画，而只是暂停它。这意味着浏览器将保留有关号码的信息。已完成的迭代次数。因此，当一个迭代完成时，它不会进一步执行。

标签： css animation

【解决方案1】：

在悬停时添加动画效果，而不是更改animation-play-state。

这是一种替代方法，因为动画在重新开始时不会从结束处继续播放

 .bounce {
     width:50px;
     height:50px;
     background:tomato;
     border-radius:50%;  
}
.bounce:hover {
    -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  animation-name: bounce;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0s;
   animation-direction: alternate;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);opacity: 1;}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}

&lt;div class="bounce"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

将您的animation-iteration-count: 1; 设为此animation-iteration-count: infinite;

看起来像这样。

.bounce:hover {
        animation-play-state:running;
       animation-iteration-count: infinite;
    }

【讨论】：

【解决方案3】：

将您的 css 属性 animation-iteration-count: 值设置为无限

 .bounce:hover {
        animation-play-state:running;
       animation-iteration-count: infinite;
    }

动画迭代次数：1； 通过使用这行代码，当您将按钮悬停时，动画只会播放一次，不会再播放。

这里是小提琴的例子：https://jsfiddle.net/eugensunic/wexd3spp/5/

【讨论】：

这是正确的。删除 animation-iteration-count 就像我在对问题的评论中提到的那样单独是行不通的，因为默认值仍然是 1。
我认为，是的......虽然我倾向于用 JQuery 来解决类似这样的问题