如何停止我的 webkit 帧动画? [英] how to stop my webkit frame animation?

问题描述

我正在使用 webkit 动画属性制作一个小动画.它终于工作了，它回到了第一步.这意味着我将对象移动到 200 像素，一旦达到 200 像素，它应该保持不变，不应该回到旧状态.我怎样才能进入最终状态?

i am doing a small animation using webkit animation property. it's working finally, it is back to the first step. that mean i am moving the object into 200px, once that reach 200px, it should stay, should not come back to old state. how can i stop in to the final state?

我的 css 代码:

 .box {
            width:100px;
            height:100px;
            background-color: black;
            -webkit-animation-duration: 4s;
            -webkit-animation-delay:5s;

            position:absolute;
        }


        @-webkit-keyframes bounce {
            from {
              left: 0px;
            }
            to {
              left: 200px;
            }
        }

推荐答案

webkit 动画属性在动画完成时返回其原始值.(参见 http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Animations/Animations.html)

webkit animated properties return to their original values when the animation completes. (see http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Animations/Animations.html)

您需要使用侦听器捕获动画的结束事件，并将框的 'left' 属性设置为 200px(您的结束点).

you'll want to capture the end event of the animation with a listener and set the 'left' property of the box to 200px (your ending point).

类似(使用 jQuery):

something like (uses jQuery):

<script type="text/javascript">
$(document).ready(function() {
        window.addEventListener('webkitAnimationEnd',function( event ) { $('.box').css('left', '200px'); }, false);
});
</script>

这篇关于如何停止我的 webkit 帧动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！