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 or examples in 3D.
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. There is a video on using transform and transition in my HTML and CSS YouTube playlist.
Digital Clock
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:
- setTimeout() is used when you want to run a function a certain number of milliseconds into the future, effectively creating a delay. It's useful to one-off delays or where the frequency isn't fixed - e.g. in my Simon and traffic light examples.
- setInterval() is used where you'd like to call the same function repeatedly with a fixed frequency, e.g. every second. The clock examples on the current page use this technique, as does my seven-segment display example. I didn't use it for the traffic light because each colour appears for a different amount of time.
- requestAnimationFrame() can be used when smooth animation is more important than exact timing; effectively the browser calls the function when it's "ready" to redraw the screen, resulting in a less jerky effect on slower devices. My rotation example uses this technique.
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 was used for in schools.
You can view this example on its own page (to isolate the CSS required). 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 shown - 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.
3D Animation
You can also animate objects in three dimensions - although the maths is slightly more complex. This cube is simply six square <div>s positioned and rotated in the x-, y- and z-axes using pure CSS. Open this example in a separate tab/window to isolate just the code required for the cube.