Cross-Browser Animated CSS Clock Example based on an original WebKit example by Toby Pitman. Click image above to view.

In my first article about CSS3, I introduced a new script, cssSandpaper, which allows developers to sidestep the myriad of vendor specific properties and just use one property to implement properties like transform for all browsers, including IE.

After posting the article, I saw many examples of CSS3 Transform using animations. Toby Pitman’s Old School Clock is an excellent example of how one can use a Webkit’s -webkit-transform to make a small but excellent demo. I wanted to prove that it would be easy to take this example and make it work in all modern browsers, so I did. It took 15 minutes (okay, I had to change cssSandpaper to offer scripting support, but that didn’t take too long either). I then coded a few more examples to show that some really neat things can be done using a small bit of JavaScript.  Here are links to these examples:

• The Cross-Browser CSS Clock based on code by Toby Pitman
• A remixed movie leader countdown (actually, it uses the RCA Indian Head Test Pattern, but whatever …)
• A psychedelic animated gradient

How To Do CSS3 Animated Effects?

If this was the perfect world, all a developer would need to do is use a DOM element’s style property and manipulate the appropriate camel-case CSS property. For example, if a developer wanted to script the rotation of a node, he or she would code the following:

    node.style.transform = "rotate(25deg)";

However, this is not the perfect world — after all, I am not making millions writing this blog and the current flavours of IE in use today don’t support many of the CSS3 properties. However, using cssSandpaper, one could use the following method to do the same thing:

    cssSandpaper.setTransform(node, "rotate(25deg)");

Developers can use cssSandpaper to manipulate opacity, box-shadow, and background gradients, using cssSandpaper.setOpacity(), cssSandpaper.setBoxShadow() and cssSandpaper.setGradient() respectively. All these functions take two parameters: a DOM node, and the appropriate CSS property values as described in the cssSandpaper documentation. For example:

    cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)");
    cssSandpaper.setOpacity(node, 0.3);
    cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc");
    cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));")

For more information, please read the official documentation of cssSandpaper.

Caveats

• When animating using transform‘s scale() function, make sure you avoid scaling objects too much larger than their original size. This is due to the fact that IE scales objects as if they were images, and scaling-up an object will make the result quite pixelated.
• The -sand-gradient() function does not use Firefox’s native -moz-gradient function to produce CSS3 gradients, but a solution using Canvas which works in all Canvas enabled versions of Firefox. I will update cssSandpaper to use -moz-gradient in a future release (if anyone wants to help me get this working, please contact me via the email address at the top of this page, or by leaving a comment below).

Go to the cssSandpaper documentation to download the latest version.