Javascript 使用Webkit变换以弧形移动

现在我正试图把一些非常简单的东西组合起来，从中学习，并将其纳入一个更大的项目中

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

现在，我对CSS转换非常陌生。在过去，我曾使用jQuery动画，但在移动设备上运行起来似乎非常慢。我知道这里可能有一些最佳实践的想法可以用来设置和管理这些动画，但我会一边做一边想办法

现在，长方体一直向上移动，然后出现在起始位置。我怎样才能让它留在那里

#球{
显示：块；
位置：绝对位置；
宽度：50px；
高度：50px；
溢出：隐藏；
顶部：500px；
左：100px；
背景色：红色；
}#行动{
显示：块；
字体大小：粗体；
}
.动画{
-webkit动画名称：throwBall；
-webkit动画计时功能：线性；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
}
@-webkit关键帧throwBall{
来自{webkit transform:translate（0px，0px）；}
25%{-webkit转换：翻译（75px，-25px）}
50%{-webkit转换：翻译（150px，-75px）}
75%{-webkit转换：翻译（225px，-150px）}
到{-webkit转换：翻译（300px，-300px）；}
}
if（typeof（jQuery）=‘未定义’）document.write（“”）；
激励我
$（文档）.ready（函数（）{
$（'#action'）.bind（'click'，function（）{
$（'#ball'）.addClass（'animation'）.bind（'webkitAnimationEnd'，function（）{
});
});
});

只需将动画的结束状态添加到类中，因为动画结束时将删除动画设置的属性。添加

-webkit转换：translate（300px，-300px）添加到
动画
类中可以解决您的问题

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

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