css3动画:hover;强制整个动画

前端之家收集整理的这篇文章主要介绍了css3动画:hover;强制整个动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个简单的反弹动画,我正在应用于:hover状态的元素:
  1. @keyframes bounce {
  2. 0% {
  3. top: 0;
  4. animation-timing-function: ease-out;
  5. }
  6. 17% {
  7. top: 15px;
  8. animation-timing-function: ease-in;
  9. }
  10. 34% {
  11. top: 0;
  12. animation-timing-function: ease-out;
  13. }
  14. 51% {
  15. top: 8px;
  16. animation-timing-function: ease-in;
  17. }
  18. 68% {
  19. top: 0px;
  20. animation-timing-function: ease-out;
  21. }
  22. 85% {
  23. top: 3px;
  24. animation-timing-function: ease-in;
  25. }
  26. 100% {
  27. top: 0;
  28. }
  29. }
  30.  
  31. .Box:hover {
  32. animation: bounce 1s;
  33. }

动画效果很好,除了当您将光标从元素中删除后,它会突然停止。有没有强制它继续设定的迭代次数即使鼠标已经退出?基本上我在这里寻找的是由:悬停状态触发的动画。我不是在寻找一个javascript解决方案。我没有看到这样做的规格,但也许有一个明显的解决方案,我错过了这里?

这是一个小提琴玩:http://jsfiddle.net/dwick/vFtfF/

解决方法

我恐怕解决这个问题的唯一方法是使用一些javascript,你必须将动画添加为一个类,然后在动画完成时将其删除
  1. $(".Box").bind("webkitAnimationEnd mozAnimationEnd animationEnd",function(){
  2. $(this).removeClass("animated")
  3. })
  4.  
  5. $(".Box").hover(function(){
  6. $(this).addClass("animated");
  7. })

http://jsfiddle.net/u7vXT/

猜你在找的CSS相关文章