Question

我创建了一个简单的反弹动画，我正在应用于元素的: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 解决方案。我还没有看到在规范中做到这一点，但也许有一个明显的解决方案我错过了这里？

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

Answer 1

我担心解决这个问题的唯一方法是使用一些javascript，你必须将动画添加为一个类，然后在动画结束时将其删除。

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

$(".box").hover(function(){
  $(this).addClass("animated");        
})

http://jsfiddle.net/u7vXT/

Answer 2

一个简单的技巧将完成这项工作：

-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;

在元素上设置一个较高的“延迟”（不是：悬停）。

来自：Stackoverflow - Robert McKee

Answer 3

只是为了改善Duopixel的答案，当我无限制地运行时，我必须这样做：

$(".box").css("animation-iteration-count", "1"); 
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("animated")  
})
$(".box").hover(function(){
  $(".box").css("animation-iteration-count", "infinite"); 
  $(this).addClass("animated");        
})

这不会突然结束动画。

Answer 4

CSS可能在某些情况下有所帮助，但不是全部，下面是将在悬停和悬停后设置字母间距动画的代码。

＆＃13;

h1
{
    -webkit-transition:all 0.3s ease;
}

h1:hover
{
    -webkit-transition:all 0.3s ease;
    letter-spacing:3px;
}

＆＃13;

<body>
    <h1>Hello</h1>
</body>

＆＃13;

Answer 5

如果有人想使用纯Javascript，我在同一帖子JsFiddle中用这个答案创建了一个https://stackoverflow.com/a/7697786/8335898。

const elements = document.getElementsByClassName('box');

for (let i = 0; i <= elements.length; i++) {
  elements[i].addEventListener('animationend', function(e) {
    elements[i].classList.remove('animated');
  });

 elements[i].addEventListener('mouseover', function(e) {
   elements[i].classList.add('animated')
 })
}

Answer 6

与@methodofaction的答案相同，但适用于使用React的任何人：

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export default function Icon({ icon }) {
    const [animated, setAnimated] = useState(false);

    return (
        <div
            onMouseEnter={() => setAnimated(() => true)}
            onAnimationEnd={() => setAnimated(() => false)}
        >
            <FontAwesomeIcon icon={icon} className={animated ? 'animated' : ''} />
        </div>
    );
}

css3动画上：悬停;强制整个动画

6 个答案: