Currently, I am working on a simple project to learn and then incorporate it into a larger project.
I have a basic box that I want to move from one position to another using CSS webkit animations and the translate function for iOS hardware acceleration. I want it to move in an arc and then stop at the top of the arc.
I am new to CSS transitions and have previously used jQuery animations, but they run slowly on mobile devices. I know there are best practices for setting up and managing these animations, but I am learning as I go.
Right now, the box moves all the way up and then returns to its starting position. How can I make it stay there?
<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>