Tomomi Imura

Tomomi Imura

An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer.

Twitter LinkedIn Github Flickr

Creative Commons License
My articles are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

More Update on CSS Animation

OK, so now I am trying to clarify how to make the css animation works using class name swap.

The conclusion is that it does work! – but you need to apply the -webkit-transition to “destination” class not the “origin” as I first attempted. Thanks for Dave and Dean from Apple, who pointed it out.

Go to The Actual Example Page

HTML Markup used for these examles (from Apple’s doc):

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

What *Not* To Do

This worked on some older WebKit nightly builds, but not on the latest build.

The reason is the -webkit-transition properties into the newClassName definition.

/* *** This is a bad example *** */

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

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.
The reason this example works is that the -webkit-transition properties are defined in a generic <div> tag, not in a specified class that applied only for “before” state.

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

What To Do – 2

Move all the -webkit-transition properties into the newClassName definition.

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

Now really a JavaScript-free. Yay.



comments powered by