：hover;上的css3动画；强制整个动画

  • Z时代
  • 2024-01-10
  • 分类：问答

我创建了一个简单的弹跳动画，该动画将应用于:hover元素的状态：

@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}
.box:hover { 
    animation: bounce 1s;
}

动画效果很好，但是当您从元素中删除光标时，动画会突然停止。无论如何，是否有强迫它继续设置的迭代次数（即使鼠标已经退出）？基本上，我在这里寻找的是由:hover状态触发的动画。我 在寻找 解决方案。无论如何，我还没有看到在规范中执行此操作，但是也许我错过了一个明显的解决方案？

回答：

恐怕解决此问题的唯一方法是使用一些JavaScript，您必须将动画添加为类，然后在动画结束时将其删除。

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(this).addClass("animated");        
})

以上是 ：hover;上的css3动画；强制整个动画 的全部内容， 来源链接： utcz.com/qa/432530.html

回到顶部