CSS3动画+ @keyframe运行到最后[重复]

Posted 2023-03-06

【中文标题】CSS3动画+ @keyframe运行到最后[重复]

【英文标题】：CSS3 Animation + @keyframe run till the end [duplicate]

【发布时间】：2013-05-21 20:53:36

【问题描述】：

当元素为 :hover 时，我无法找到播放动画直到结束的方式。

当 i :hover out 时，动画会重置 - 但我希望它一直持续到最后。 JsFiddle

<div class="picture"></div>

    .picture:hover 
       -webkit-animation:swing 1s ease-in-out;
    


    @-webkit-keyframes swing 
      [...] 
    

【问题讨论】：

我猜 :hover 标签是不够的，我需要 js 或其他伪标签。

【参考方案1】：

好像没有纯css的解决方案，所以最好用JS解决：

*** - animation on hover force entire animation

【参考方案2】：

可能不是一个完整的解决方案，但将以下内容添加到您的图片类中：

-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

【讨论】：

有趣，过了一会儿才开始动画 - 但是为什么动画不会在 ':hover OUT' 停止，因为动画是由 ':hover' 触发的。

因为在图片类上触发了相同的动画（尽管延迟很长）。它看到它也有动画，所以即使在悬停后它也会继续播放。可能有更好的方法，比如告诉它播放动画 0 次而不是长时间延迟，但这是我尝试的第一件事，它奏效了。

这个解决方案不起作用。

正确，此解决方案不再有效。

【参考方案3】：

我确实喜欢这个 http://jsfiddle.net/Z5aq7/

我只是将其设置为一个类 (.animate) 并在悬停时添加该类

，而不是悬停

$('.picture').hover(function()
    $(this).addClass('animate');
);

希望这会有所帮助！