Monday, November 1, 2010

Animations with CSS3.

I didn't know that it was possible animate a web page elements without javascript.
CSS Animations, are currently working only on Webkit browsers (Chrome, Safari).




When it works it can be as exasperating as blinking text.
Example code for a rotating element:

<div 
onmouseout="this.style.webkitTransform='rotate(-360deg)'"
onmouseover="this.style.webkitTransform='rotate(360deg)'" 
style="-webkit-transform: rotate(-360deg); 
-webkit-transition-delay: initial; 
-webkit-transition-duration: 1s; 
-webkit-transition-property: -webkit-transform; 
-webkit-transition-timing-function: ease-in;"
>
...
SOME ELEMENT
...
</div>


References: http://www.andrew-hoyer.com/experiments/walking/,
http://webkit.org/blog/138/css-animation/
and http://www.the-art-of-web.com/css/css-animation/

No comments:

Post a Comment