Question

我有这样的动画

div {
    position: relative;

    -webkit-animation: bouger 2s linear infinite;
}

@-webkit-keyframes bouger {

    0%       { left: 0%;   } 
    50%      { left: 50%;   } 
    100%     { left: 100%;   }

}

我怎样才能中断动画并在点击之后转到关键帧50％（left: 50%;）

<div>CC</div>
<input type="button" value="Go to 50%" />

这里是FIDDLE，我希望动画继续播放。

Answer 1

使用jQuery：

这将停止动画并将div向左移动50％。

$("input").click(function() {
    $("div").css({
        '-webkit-animation' : 'none',
        'left' :  '50%'
    })
})

fiddle

或者您可以将其向左移动50％并通过定义新的@ -webkit-keyframes继续动画，并通过向div添加一个类来运行它。像这样：

div.two {
    left:50%;
    -webkit-animation: bouger2 2s linear infinite;
}

@-webkit-keyframes bouger2 {
    0%      { left: 50%;   } 
    100%     { left: 100%;   }
}

下面的代码使用的是toggleClass，它将来自bouger和bouger2，但如果你愿意，可以将它改为'addClass'：

$("input").click(function() {
    $("div").toggleClass('two')
})

http://jsfiddle.net/SvdUN/3/

中断动画并跳转到特定的关键帧

1 个答案: