鼠标离开元素后如何在：hover上继续CSS动画？ [英] How to continue CSS animation on :hover after mouse leave the element?
问题描述
有一个动画示例：
.b-ball_bounce {transform-origin: top;}
@-webkit-keyframes ball_animation {
20% {transform: rotate(-9deg);}
40% {transform: rotate(6deg);}
60% {transform: rotate(-3deg);}
80% {transform: rotate(1.5deg);}
100% {transform: rotate(0deg);}
}
.b-ball_bounce:hover {
-webkit-animation: ball_animation 1.5s;
animation-iteration-count: 1;
}
将鼠标悬停在元素动画上时。但是当鼠标离开时，动画立即停止。但是我想在鼠标离开后完成动画。
When mouse hover an element animation start. But when mouse leave, animation stops immediately. But I want to finish animation after mouse leave.
这是借助JavaScript的示例： http://codepen.io/Profesor08/pen/pvbzjX
而且我想对纯CSS3做同样的事情，现在看起来是这样： http://codepen.io/Profesor08/pen/WbxeoW
This is example with help of JavaScript: http://codepen.io/Profesor08/pen/pvbzjX And I want to do the same with pure CSS3, there is how it looks now: http://codepen.io/Profesor08/pen/WbxeoW
推荐答案
在某些情况下（但不是全部）CSS可能会有所帮助，下面的代码将为悬停时和悬停后的字母间距设置动画。
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}
<body>
<h1>Hello</h1>
</body>
这篇关于鼠标离开元素后如何在：hover上继续CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
