Question

我正在使用webkit动画属性做一个小动画。它终于工作了，它又回到了第一步。这意味着我将对象移动到200px，一旦达到200px，它应该停留，不应该回到旧状态。我该如何才能进入最终状态？

我的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;
            }
        }

Answer 1

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

您需要使用侦听器捕获动画的结束事件，并将框的“左侧”属性设置为200px（结束点）。

类似（使用jQuery）：

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

Answer 2

如果单向动画是您想要的，我认为您应该使用Webkit Transitions。

Answer 3

试试这个： -webkit-animation-fill-mode：转发;

如何停止我的webkit框架动画？

3 个答案: