使用 Webkit 过渡进行弧线移动

Question

现在我正在尝试将一些非常简单的东西放在一起，从中学习，并将其合并到一个更大的项目中。

我有一个简单的盒子，我试图使用 css webkit 动画和翻译功能（用于 iOS 硬件加速目的）从一个位置移动到另一个位置。我需要它沿弧线移动，然后停留在弧线顶部的那个点。

现在，我对 CSS 过渡还很陌生。过去我使用过 jQuery 动画，但它在移动设备上运行速度似乎非常慢。我知道我可能可以在这里融入一些最佳实践想法来设置和管理这些动画，但我正在边走边弄清楚它们。

现在，盒子一直向上移动，然后又回到起始位置。我怎样才能让它留在那里？

http://cs.sandbox.millennialmedia.com/~tkirchner/丰富/M/march_madness/tmp/

<style type="text/css">

#ball {
    display:block;
    position: absolute;
    width: 50px;
    height: 50px;
    overflow: hidden;
    top: 500px;
    left: 100px;
    background-color: red;  
} #action {
    display: block;
    font-weight:bold;
}

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes throwBall {
    from { -webkit-transform: translate( 0px, 0px ); }
    25% { -webkit-transform: translate( 75px, -25px ) }
    50% { -webkit-transform: translate( 150px, -75px ) }
    75% { -webkit-transform: translate( 225px, -150px ) }
    to { -webkit-transform: translate( 300px, -300px ); }
}


</style>

<script type="text/javascript">
    if ( typeof(jQuery) == 'undefined' ) document.write('<scri'+ 'pt type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></scri'+'pt>');
</script>

<a id='action'>Animate Me</a>

<div id='ball'></div>

<script type="text/javascript">
$(document).ready(function(){
    $('#action').bind('click',function(){
        $('#ball').addClass('animation').bind('webkitAnimationEnd',function(){
        });
    });
});
</script>

Answer 1

只需将动画的结束状态添加到您的类中，因为当动画结束时动画设置的属性将被删除。将 -webkit-transform:translate(300px, -300px); 添加到您的 animation 类可以解决您的问题。

.animation {
    -webkit-animation-name:  throwBall;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(300px, -300px); 
}