CSS css3 动画：悬停；强制整个动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7694323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 animation on :hover; force entire animation
提问by David Wick
I've created a simple bounce animation which i'm applying to the :hoverstate of an element:
我创建了一个简单的反弹动画，我将其应用于: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;
}
The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops. Is there anyway to force it to continue the set number of iterations even if the mouse has exited? Basically what I'm looking for here is an animation triggered by the :hoverstate. I'm notlooking for a javascriptsolution. I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?
动画效果很好，除了当您从元素中移除光标时，它会突然停止。无论如何，即使鼠标已退出，是否也可以强制它继续设定的迭代次数？基本上我在这里寻找的是由:hover状态触发的动画。我不是在寻找javascript解决方案。我还没有在规范中看到这样做，但也许我在这里错过了一个明显的解决方案？
Here's a fiddle to play with: http://jsfiddle.net/dwick/vFtfF/
这是一个可以玩的小提琴：http: //jsfiddle.net/dwick/vFtfF/
回答by methodofaction
I'm afraid that the only way to solve this is with a bit of javascript, you must add the animation as a class and then remove it when the animation finishes.
恐怕解决这个问题的唯一方法是使用一些javascript，您必须将动画添加为一个类，然后在动画完成时将其删除。
$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
$(this).removeClass("animated")
})
$(".box").hover(function(){
$(this).addClass("animated");
})
回答by Slake
A simple trick will do the job :
一个简单的技巧就可以完成这项工作：
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
Set the 'delay' with an high value on the element (not :hover).
在元素上设置一个高值的“延迟”（不是 :hover）。
回答by gergana
I created a JsFiddlewith this answer from the same post https://stackoverflow.com/a/7697786/8335898using pure Javascript if anyone wants to use it.
如果有人想使用它，我使用纯 Javascript从同一篇文章https://stackoverflow.com/a/7697786/8335898 中创建了一个JsFiddle。
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')
})
}
回答by Willy Cornejo
just to improve Duopixel answer, when runnig infinite animitation I have to do:
只是为了改进 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");
})
This just not abruptly end the animation.
这只是不会突然结束动画。
回答by Siddharth Thevaril
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
CSS 在某些情况下可能会有所帮助，但不是全部，下面是在悬停和悬停后设置字母间距动画的代码。
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}<body>
<h1>Hello</h1>
</body>回答by NearHuscarl
Same answer with @methodofaction but for anyone using React:
与 @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>
);
}
