Let the Show Begin
If you have a supported browser the animation will start automatically in the field below and run indefinitely. Moving your mouse over the field will pause the animation. The colour and placement of the 'launchers' and 'explosions' is randomised each time you reload the page.
The code as written will work in WebKit (Safari, Chrome and iPhone/iPad) and Mozilla (Firefox) browsers. It should be fairly simple to add support for Opera as well, and possibly Internet Explorer 10.
While working out how to implement the animation in WebKit was tricky enough, adding support for Mozilla browsers, which should be a simple task, led to some serious hair-tearing.
None of which was helped by the fact that the only error message returned in all cases is:
Error: SYNTAX_ERR: DOM Exception 12
The main problems have to do with how the different browsers handle manipulation of the document.styleSheets object to dynamically add new styles to the page. The normal process is to just append these styles to the first style sheet associated with the page (document.styleSheets) using its insertRule() method.
Unfortunately Firefox has a bizarre restriction that you can only append styles to style sheets hosted at the same domain. God forbid you should virtually try to deface a temporary virtual object. Add to that the fact that we have a varying number of style sheets according to whether ModPagespeed is applied and you see the problem.
The second issue arose when trying to dynamically add -moz- definitions (specifically the @-moz-keyframes definition) to the CSS in WebKit throws an error. As does trying to add @-webkit-keyframes in Firefox.
One way around this is to do some browser detection and pass only the relevant vendor-prefixes (WebKit, Mozilla, Opera or Microsoft are the main ones). The other option, which we've used, is to wrap the relevant lines in a try... catch statement to allow the script to continue.
The animation uses two keyframes - one for the trajectory of the 'rockets' and another for the shards of light in the explosion. Here you can see a basic sketch of what's going on:
Each rocket is assigned a random starting position along the line at the bottom of the field. It is also assigned a random target within the area marked. As a rocket approaches its target point, it shrinks down to become invisible (0x0 pixels).
At this point the flares are made visible. These are actually a series of DIVs pointing outward in a radial fashion, with a color at the outward tip - like matchsticks. To simulate the explosion they simply increase in length which moves the lights outward.
Because the flares are children of the rockets, they follow the same trajectory downward. The final change is for them to fade away as they drift towards the 'ground'.
- add all the required elements to the page (DOM);
- create and assign keyframes for each rocket; and
- assign colours and rotate each flare to the right position.
Everything else is done using CSS, and the whole animation could be set up using CSS if we didn't want it to be random each time, but where's the fun in that?
If you have any problems or comments, please let us know using the Feedback form below.
Related Articles - Transforms and Transitions
- CSS Animation Using CSS Transforms
- CSS 3D Transforms and Animations
- CSS Transition Timing Functions
- CSS Bouncing Ball Animation
- CSS Infinite Animated Photo Wheel
- CSS An actual 3D bar chart
- CSS Upgraded fading slideshow
- CSS Photo Rotator with 3D Effects