UPDATED!!! WebKit CSS Animation Test

OK thanks to Dave who exlained in the WebKit bug I opened, and Dean, who gave me a tip on blog, I figured how to use a new class name to make the transion.

Simply, by removing the -webkit-transition rules from "origin" class, and move them to "destination" class.

Example

What Not To Do

Worked on slighty old builds but no longer works on the latest build

			
div.box { /* this style applies only to the 'before' transition state */
-webkit-transition-property: opacity; 
-webkit-transition-duration: 2s; 
} 
div.boxFade { 
opacity:0; 
}				
			
			
		

			
<div class="box" 
	style="width:100px; 
	height:100px; 
	background-color:blue;" 
	onclick="this.className = 'boxFade'"> 
Tap to fade 
</div>				
			
		

Click the box. On clicking event, the box's opacity turns 0 immediately because the transition properties are not set for the "after" state.

What To Do - 1

This is the actual example snippet from Apple's documentation, Safari CSS Animation Guide for iPhone OS page 13-14.

			
div { /* this applies for both 'before' and 'after' states - that is why it works */
	-webkit-transition-property: opacity; 
	-webkit-transition-duration: 2s; 
} 
div.fadeAway { 
	opacity:0; 
}				
			
			
		

What To Do - 2

Modify the CSS like this:

			
div.fadeAway { /* give the transition rules to "after" state */
	opacity:0; 
	-webkit-transition-property: opacity; 
	-webkit-transition-duration: 2s; 
}				
				
		

And now try this. This should work fine on iPhone Safari.

Back to GirlieMac! blog