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.  The first few examples involve calculations and/or interactivity, but scroll down for examples with no coding required.

CSS Transitions and Transformations

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 but also uses transformations to rotate the hands. 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.

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.

Timing in JavaScript

There are, at least, three ways to time things in JavaScript:

You can download all of the JavaScript examples that change colour and text to display state.

Animation without Programming/Coding

Any example that requires user interaction (beyond moving the mouse over an element - see below) or calculation will require JavaScript, or some other sort of client-side scripting.  It is possible, however, to create an animation in CSS that runs on its own with no scripting or user intervention, as shown below.  This is exactly the sort of thing that Flash is used for in schools.

H
e
l
l
o

If you'd like to see that example on its own page (to isolate the CSS required) then click here.  You can also read more about CSS animation on w3schools.

The basic idea is that you create an animation scheme, describing the style of the element at various points in the animation.  For example, the square in the example above has this animation scheme:

@keyframes example {
	0% {background-color: green; left: 0vw; transform: rotate(0deg)}
	50% {background-color: blue; left: 81vw; transform: rotate(90deg)}
	100% {background-color: green; left: 0vw; transform: rotate(180deg)}
}

This means that at the start (0%) it's green, on the left, and not rotated.  Half-way through (50%) it's blue, on the right, and rotated 90 degrees, and at the end (100%) it's green again and back on the left, but is rotated 180 degrees.

The square is just a <div>, and is linked to the animation using the following CSS attributes (note that only the ones required for the animation are show - it also needs to be positioned, coloured, etc.):

#square {animation-name: example; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: linear}

As there's no coding involved, you can't react to user input, perform calculations or check the current date or time, but the technique could be used to create a simple stopwatch or countdown timer.

You can add a limited amount of user interactivity using the :hover selector as described on the rollovers page.