---

Search posts under HTML5:

---

HTML5 > Canvas Animation

HTML5 has rich sets of elements and support that help us to create animation in browser without any third party plugins.

Before we starting learning HTML5 animation, let's try to understand what is Animation?

What is animation?

Animation is the process of making simulation of movement created by displaying series of pictures and frames after certain duration of time.

Cartoons, Movies, multimedia presenrations are the example of animations.

How to create animation in HTML5?

HTML5 has mainly following ingredients to create good animation

1. HTML5 canvas element
2. JavaScript
3. CSS3

We have already talked about HTML5 canvas in previous sections. JavaScript and CSS3 tutorials are available on this website. Once you are comfortable with all 3 ingredeints given above, you are ready to create animation in HTML5.

Animation can be performed using any other HTML5 elements as well such as <div>, <p>, <span> etc. however <canvas> has rich set of understable commands using JavaScript that works well to perform animations.

Read posts under HTML5 > Canvas Animation

1. Layering on Canvas
2. Simple animation
3. Start, stop and cancel animation
4. Animating sequence of Images
5. Canvas Animation
6. Bouncing Ball in Canvas
7. Analog clock using canvas
8. Digital clock Animation