当元素处于:hover状态时,我找不到播放动画直到结束的方法。
- 当我: hover离开时,动画会重置 - 但我希望它一直播放到结束。
- JsFiddle
<div class="picture"></div>
.picture:hover {
-webkit-animation:swing 1s ease-in-out;
}
@-webkit-keyframes swing {
[...]
}
当元素处于:hover状态时,我找不到播放动画直到结束的方法。
<div class="picture"></div>
.picture:hover {
-webkit-animation:swing 1s ease-in-out;
}
@-webkit-keyframes swing {
[...]
}
这可能不是完整的解决方案,但请在您的图片类中添加以下内容:
-webkit-animation:swing 3600ms ease-in-out 6000s;
-webkit-transform-origin:top;
JsFiddle:http://jsfiddle.net/5SueS/4/
这个解决方案在现代浏览器中已经不再适用。请参见css3 animation on :hover; force entire animation。
$('.picture').hover(function(){
$(this).addClass('animate');
});