Create a coin animation like an animation in a temple using CSS3 and Javascript

Question

I am trying to create a coin animation, such as an animation in a temple run using css3 and javascript. I tried to replicate the animation using the transition in css3, but I cannot achieve the same

Are they any example that has the same animation on the Internet? or can someone help me achieve the animation.

Update

When I click a button, I want some coins to exit the button and be collected in a basket (buttons can be anywhere on the page, and the basket is installed 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 just use jQuery animations? 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(); }); });​ 

Using this method, you can also use CSS animations to improve the behavior of coins when they fly to the basket.

Answer 2

I think you should use some library, especially the physics library for javascript, like Box2D, which will allow you to create such animations based on gravity.

there are other ways, for example, creating your own function that takes the sprite (coins) from the ab position, using some calculation that makes it look like it flew by using a winding path.

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

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