Animation on Web-Pages

I've never been a fan of Flash for many reasons, and now, with mobile devices, HTML5 and CSS3, there's even less of a need to use it. The purpose of this page is to show that you can add animated elements to your page without the need for Flash.

CSS Transitions

The first two examples use CSS transitions. The transition property was added in CSS3 and is effectively an entry animation that controls the way in which changes to properties of elements on the page are introduced - e.g. you can change a style property and make the change gradually, like a tween in Flash. My abacus page uses this technique to make the beads slide into position. As this is a new technique, older browsers such as Internet Explorer 9 will just ignore it.

Digital Clock

Shadow
:
Shadow
Shadow
:
Shadow
Shadow

The clock works as follows: each digit is a DIV. The DIVs have, as a background image, a PNG file with all of the digits in a row. When you add a background image in CSS, you can also add an offset, background-position, to control which part of the image appears if the image is larger than the DIV. What this does is effectively slide the background image up and down so that only one digit at a time appears in the window. The offset is changed every second using JavaScript, and the transition property causes the digit to slide into position. View the source of this page to see exactly how it works.

Analogue Clock

This analogue clock works in a similar way. There is a DIV for the clock (sized at 50% so that it scales with the page) that has the face as its background. Inside that DIV are three further DIVs with the hour, minute and second hands as their backgrounds. These DIVs are positioned absolutely so that they are stacked on top of each other, and the z-index property ensures that they stack with the hands in the right order.

The JavaScript then uses the CSS transform property to rotate the DIVs containing the hands to the appropriate angle for the current time. The transition property creates the animation effect that causes the second hand to sweep into position.

Again, you can view the source to see exactly how the clock works.

The benefit of using CSS transitions for your animation (possibly with some JavaScript) is that it works on any recent browser without any need for plug-ins. This means that the page loads more quickly, but also that these animations will work on mobile devices running iOS or Android - if you have a tablet or smartphone, load this page and see what happens.

I've created a third example on a separate page - the sort of thing that students create in Flash for their DiDA/Nationals coursework.  Make sure that you have a newish browser (e.g. Internet Explorer 11 or a later version of Chrome) and click here.

Canvas

Canvas is used to create vector graphics on the web-page, as seen on the trigonometry page. Using JavaScript, you can also add animation or interactivity to canvas - see the page I created to help students estimate angles.

The Mozilla web-site includes an example of a clock animated using canvas.

If you would like to see JavaScript examples that change colour and text to display state, click here.