Question

Right now I’m trying to put together something really simple, learn from it, and incorporate it in a bigger project.

I have a simple box I’m trying to move from one position to another using css webkit animations and the translate function (for iOS hardware acceloration purposes). I need it to move in an arc and then stay at that point at the top of the arc.

Now, I’m pretty new to CSS transitions. In the past I’ve used jQuery animations but that seems to run really slowly on mobile devices. I know there’s probably some best practice ideas I can incorporate here for setting and manging these animations, but I’m kinda figuring them out as I go.

Right now the box moves all the way up and then appears back in the starting position. How do I get it to stay there?

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

Just add the end state of the animation to your class as properties set by animation are removed when animation ends. Adding -webkit-transform: translate(300px, -300px); to your animation class fixes your problem.

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