javascript - What are the basics for creating animations in web apps? -

i looking how create simple animation in html5 app. want start off-page canvas (with top set 100% of window height), , animate middle of screen, above other canvases.

i have tried google, search results mix of animating divs , animation within canvas, , nothing have attempted seem work. example, jquery animate() function, discussed here.

i have tried dynamically create canvas , animate on screen, did not work. current code follows:

html

<div id="view-adduser" >     <canvas id="view-canvas"></canvas> </div> 

css

#view-adduser {     left: 25%;     top: 100%;     width: 75%;     height: 75%; } 

javascript (this called when button pressed)

$("#view-adduser").animate({     top: 100 }, 3000, function() {     alert("animation complete"); }); 

how can correctly animate? final result should up-direction of this moonbase animation.

i'd recommend library tween.js.

the kind of animation you're refering in questions of type "linear" i.e. move object b @ constant rate.

a library tween.js various types of easing (the slow down/speed effect you're showing in example) , "elastic" algorithms.

a simple example site.