NOTES - This test page was written in early July 09, before the -webkit-animation properties and @-webkit-keyframes at-rule were implemented by Webkit team. All examples in this page are now called implicit animations, while declared animations explicitly executed when the animation properties are applied to elements.

Please see my newer blog post on css animation using keyframes at http://girliemac.com/blog/
Thanks,
Tomomi

WebKit CSS Animation and Transform Test (and Gradient)

The CSS Animation and Transform work only on new WebKit. Not on Firefox, or well, IE.
The tests on this page works fine on WebKit nightly build, r35231 (AppleWebKit/527.3+[Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/527+ (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1]),
Does not work perfectly on my Safari 3.1, both for Mac (AppleWebKit/525.18[Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1]) and iPhone (AppleWebKit/521.18.1[Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20]).

Additional notes:
Originally, I was testing on the build r35067 (AppleWebKit/527+), with swapping class names with onclick event handler attributes, like, using this.className='newClassName', where the new class is defines with the "after transformed state" styles. The className swap was working perfectly, until I installed the newer build, r35231.
Then I figured, on latest build, build r35075 - r35231 (newest I tested), changing the values of style object properties, instead, as onclick="this.style.opacity='0'"
I wanted to create the animation entirely absent of JavaScript, but now I need to use a function to handle multiple style properties...

UPDATED on July 23, 08
The "class name swap doesn't work" issue has been resolved. Please see my animation test 2.

Opacity - Hover the box

'Hover' doesn't work on iPhone of course, so you need to tap the box instead.

Position - Click to move to right and fade out

Letter-Spacing - Click to animate letters

CLICK ME!!! - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque convallis dapibus velit. Cras eros nisl, faucibus et, adipiscing a, sollicitudin non, mauris.

Transform - Click to spin the image and fade away

* buggy on iPhone: doesn't spin - moved horizontally, instead of rotating.

Additional test added after July 23, 08

Quick Roration Tests on iPhone Safari

Simpler Transform / Roration Test - Rotate 180 deg. No 'translate'.

* funny behavior: works on iPhone, but it rotates backwards... (WebKit: clockwise. iPhone: Counter cloclwise)

More Roration test for iPhone - Rotate 360 deg. No 'translate'.

* bug on iPhone: doesn't rotate.

More Roration test for iPhone - Rotate 240 deg. No 'translate'.

* buggy on iPhone: doesn't rotate 240 deg, but rotate backwards 120 deg.

More Roration test for iPhone - Rotate 359 deg. No 'translate'.

* bug on iPhone: doesn't rotate. OR does it rotate 1 deg backwards??? mmm...

More Roration test for iPhone - Rotate negative 10 deg. No 'translate'.

* bug on iPhone: Negative doesn't make it backwards of backwards (= clockwise). No hack for iPhone. (I thought negative 1-deg will make pos 359-deg... I am wrong.)

More Roration test for iPhone - Back to Basic. Plain Positive 45-deg.

* Works as expected

Rotate test conclusion: can't control 'rotate' on iPhone Safari in the exact way you want.

Image Transform

img{-webkit-transform:rotate(45deg) scale(0.9) skew(-200deg);}

Works fine on WebKit / Safari 3.1. Image cropped on iPhone Safari when the image doesn't load quick enough.


UPDATE / CORRECTION (July 23, 08) - please see "More Update on CSS Animation"

Class Name swap test - Letter-Spacing redo. trying the new "destination transition" model

Thanks, Dean for the tip. It is working now by moving the -webkit-transition rules to the destination.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque convallis dapibus velit. Cras eros nisl, faucibus et, adipiscing a, sollicitudin non, mauris.

Bonus - CSS Gradient Linear and Radial


Back to GirlieMac! blog（日本のみんなもブログ見てみてね。）