Question

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

我有一个简单的盒子我正试图使用css webkit动画和translate功能从一个位置移动到另一个位置（用于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>

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); 
}

使用Webkit过渡进入Arc

1 个答案: