w3schools.com MORE  JavaScript HTML DOM Animation ❮ PreviousNext ❯ Learn to create HTML animations using JavaScript. A Basic Web Page To demonstrate how to create HTML animations with JavaScript, we will use a simple web page: Example

My First JavaScript Animation

My animation will go here

Try it Yourself » Create an Animation Container All animations should be relative to a container element. Example

My animation will go here

Style the Elements The container element should be created with style = "position: relative". The animation element should be created with style = "position: absolute". Example #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background: red; } Try it Yourself » Animation Code JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous. The basic code is: Example var id = setInterval(frame, 5); function frame() { if (/* test for finished */) { clearInterval(id); } else { /* code to change the element style */ } } Create the Animation Using JavaScript Example function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } } Try it Yourself » ❮ PreviousNext ❯ COLOR PICKER colorpicker HOW TO Tabs Dropdowns Accordions Convert Weights Animated Buttons Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List SHARE CERTIFICATES HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML. Read More » REPORT ERROR PRINT PAGE FORUM ABOUT Top 10 Tutorials HTML Tutorial CSS Tutorial JavaScript Tutorial W3.CSS Tutorial Bootstrap Tutorial SQL Tutorial PHP Tutorial jQuery Tutorial Angular Tutorial How To Tutorial Top 10 References HTML Reference CSS Reference JavaScript Reference W3.CSS Reference Bootstrap Reference SQL Reference PHP Reference HTML Colors jQuery Reference AngularJS Reference Top 10 Examples HTML Examples CSS Examples JavaScript Examples W3.CSS Examples Bootstrap Examples HTML DOM Examples PHP Examples jQuery Examples Angular Examples XML Examples Web Certificates HTML Certificate CSS Certificate JavaScript Certificate jQuery Certificate PHP Certificate Bootstrap Certificate XML Certificate W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2018 by Refsnes Data. All Rights Reserved. Powered by W3.CSS. W3Schools.com