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
- 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:
Developers can use cssSandpaper to manipulate
background gradients, using
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.
- When animating using
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.
-sand-gradient()function does not use Firefox’s native
-moz-gradientfunction 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-gradientin 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).