Question

我写过这样的动画代码：

    .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);}
}

并将课程“反弹”分配到我页面上的按钮。当我将鼠标悬停在它上面时，它有一个很好的小反弹动画，但是当我再次将鼠标移到它上面时，它就不会播放。每当我将鼠标悬停在它上面时，我该怎么做才能反弹？

Answer 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);}
}

<div class="bounce"></div>

Answer 2

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

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

animation-iteration-count：1; 通过使用这行代码，当您将鼠标悬停在按钮上时，动画将只播放一次而不再播放。

以下是小提琴示例：https://jsfiddle.net/eugensunic/wexd3spp/5/

Answer 3

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

看起来像这样。

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

CSS3动画鼠标悬停

3 个答案: