1

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

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

现在，我对 CSS 过渡还是很陌生。过去我使用过 jQuery 动画，但在移动设备上运行似乎非常缓慢。我知道我可以在这里结合一些最佳实践想法来设置和管理这些动画，但我在进行过程中有点想明白它们。

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

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/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>
4

1 回答 1

3

只需将动画的结束状态添加到您的类中，因为动画设置的属性在动画结束时会被删除。添加-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); 
}
于 2011-02-18T20:04:29.577 回答