![\"\"](\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/04\/clock.png\" "\\"Clock")
<\/a>Cross-Browser Animated CSS Clock Example based on an original WebKit example by Toby Pitman. Click image above to view.<\/p><\/div><\/p>\n
In my first article about CSS3<\/a>, I introduced a new script, cssSandpaper<\/a>, which allows developers to sidestep the myriad of vendor specific properties and just use one property to implement properties like After posting the article, I saw many examples of CSS3 Transform using animations. Toby Pitman’s Old School Clock<\/a> is an excellent example of how one can use a Webkit’s If this was the perfect world<\/strong>, all a developer would need to do is use a DOM element’s However, this is not the perfect world \u2014 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<\/strong>. However, using cssSandpaper, one could use the following method to do the same thing:<\/p>\n Developers can use cssSandpaper to manipulate transform <\/code>for all browsers, including IE.<\/p>\n-webkit-transform<\/code> 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.\u00a0 Here are links to these examples:<\/p>\n\n
How To Do CSS3 Animated Effects?<\/h2>\n
style<\/code> 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:<\/p>\n\n
node.style.transform = \"rotate(25deg)\";<\/pre>\n<\/blockquote>\n
\n
cssSandpaper.setTransform(node, \"rotate(25deg)\");<\/pre>\n<\/blockquote>\n
opacity<\/code>, box-shadow<\/code>, and background<\/code> gradients, using cssSandpaper.setOpacity()<\/code>, cssSandpaper.setBoxShadow()<\/code> and cssSandpaper.setGradient()<\/code> respectively. All these functions take two parameters: a DOM node, and the appropriate CSS property values as described in the cssSandpaper documentation<\/a>. For example:<\/p>\n\n
cssSandpaper.setTransform(node, \"rotate(25deg) scale(2, 2) skew(20deg, 20deg)\");\r\n cssSandpaper.setOpacity(node, 0.3);\r\n cssSandpaper.setBoxShadow(node, \"10px 10px 5px #ffcccc\");\r\n cssSandpaper.setGradient(node, \"-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));\")<\/pre>\n<\/blockquote>\n
![RCA Indian Head Test Pattern<\/a>, but whatever …)<\/li>\nA psychedelic animated gradient<\/a><\/li>\n<\/ul>\nHow To Do CSS3 Animated Effects?<\/h2>\nIf this was the perfect world<\/strong>, all a developer would need to do is use a DOM element’s style<\/code> 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:<\/p>\n\n node.style.transform = \"rotate(25deg)\";<\/pre>\n<\/blockquote>\nHowever, this is not the perfect world \u2014 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<\/strong>. However, using cssSandpaper, one could use the following method to do the same thing:<\/p>\n\n cssSandpaper.setTransform(node, \"rotate(25deg)\");<\/pre>\n<\/blockquote>\nDevelopers can use cssSandpaper to manipulate opacity<\/code>, box-shadow<\/code>, and background<\/code> gradients, using cssSandpaper.setOpacity()<\/code>, cssSandpaper.setBoxShadow()<\/code> and cssSandpaper.setGradient()<\/code> respectively. All these functions take two parameters: a DOM node, and the appropriate CSS property values as described in the cssSandpaper documentation<\/a>. For example:<\/p>\n\n cssSandpaper.setTransform(node, \"rotate(25deg) scale(2, 2) skew(20deg, 20deg)\");\r\n cssSandpaper.setOpacity(node, 0.3);\r\n cssSandpaper.setBoxShadow(node, \"10px 10px 5px #ffcccc\");\r\n cssSandpaper.setGradient(node, \"-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));\")<\/pre>\n<\/blockquote>\nFor more information, please read the official documentation of cssSandpaper<\/a>.<\/p>\nCaveats<\/h2>\n\nWhen animating using transform<\/code>‘s scale()<\/code> 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.<\/li>\nThe -sand-gradient()<\/code> function does not use Firefox’s native -moz-gradient<\/code> 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<\/code> 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).<\/li>\n<\/ul>\nGo to the cssSandpaper documentation to download the latest version.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"This is a follow-up article to my original CSS3 Transform article where I extend cssSandpaper to support scripting. Now you can animate Css3 Transforms (as well as gradients, opacities and box-shadows) in all browsers, including IE, without a lot of issues. Includes lots of neat examples.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,38,125,120,7,119,41],"tags":[220,37],"class_list":["post-923","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-gradients","category-ie-visual-filters","category-javascript","category-polyfills","category-transform","tag-animation","tag-settimeout"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=923"}],"version-history":[{"count":38,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions"}],"predecessor-version":[{"id":3286,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions\/3286"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=923"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"http:\/\/en.wikipedia.org\/wiki\/File:RCA_Indian_Head_test_pattern.JPG\"){kind=link}