Create a coins animation like the animation in temple run using CSS3 and Javascript

Question

I am trying to create a coins animation like the animation in temple run using css3 and javascript i tried to replicate the animation using transition in css3 but i am not able to achieve the same

is their any example which has the same animation in the web? or can any one help me to achieve the animation.

Update:

On click of a button i want some coins to emerge from the button and get collected into a basket (the buttons can be anywhere in the page and the basket fixed at the bottom)

Achieved using css3 transitions and jquery

Html

   <button id="btn1">button1</button>

   <div id="1" class="coin"></div>
   <div id="2" class="coin"></div> 
   <div id="3" class="coin"></div> 
   <div id="4" class="coin"></div> 
   <div id="basket"></div>
</div>​

Css

.coinanim{
    top:420px;
    left: 430px;
    width:50px;
    height:50px;
    transition: all 2s ease-in-out; 
    -webkit-transition: all 2s ease-in-out; 
    transition-delay: .36s;   
   -webkit-transition-delay: .36s;  
 }

Jquery

  $('#btn1').click(function(){
     $('.coin').css('opacity',1);
     $('#1').addClass('coinanim1');
     $('#2').addClass('coinanim2');
     $('#3').addClass('coinanim3');
     $('#4').addClass('coinanim4');
   }); 



 $('.coin').on('webkitTransitionEnd',function(){

      $('.coin').css('opacity',0);
      $('.coin').attr('class','coin');
  });

demo: http://jsfiddle.net/dA42n/23/

Answer 1

Why not simply use JQuery animate? http://jsfiddle.net/KeeB2/2/

$cart = $(".cart");
$("button").on("click", function(){
    $btn = $(this);
    var $coin = $('<div class="coin">')
        .insertAfter($btn)
        .css({
            "left": $btn.offset().left,
            "top": $btn.offset().top
        })
        .animate({
            "top": $cart.offset().top,
            "left": $cart.offset().left
        }, 800, function() {
            $coin.remove();
        });
});​

With this method you can also use CSS Animations to enhance coins behavior while they are flying to the basket.

Answer 2

i think you should use some library, especially a physics library for javascript like Box2D which would allow you to make such gravity based animations.

there are other ways too, like creating your own function that takes a sprite (coin) from position a to b using some calculation that makes it look like its flying using a curvy path.

But Box2D is mature enough and looks great when it comes to physics based effects.

Box 2d examples: http://box2d-js.sourceforge.net/index2.html