【问题标题】:CSS3 Animation + @keyframe run till the end [duplicate]CSS3动画+ @keyframe运行到最后[重复]
【发布时间】: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 或其他伪标签。

标签: css animation hover css-animations


【解决方案1】:

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

Stackoverflow - 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');
    });
    

    希望这会有所帮助!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-10-20
      • 1970-01-01
      • 2023-03-10
      • 1970-01-01
      • 2015-10-26
      • 1970-01-01
      相关资源
      最近更新 更多