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.

Update: WebKit CSS Animation

Regarding to the bug on CSS animation I mentioned on last blog entry, I got a reply from an Apple developer (Quick!)

The issue:
CSS animation doesn’t work with onclick=”this.className=’newClassName’” anymore on the latest WebKit nightly build

I filed the bug on WebKit Bugzilla, and got the answer already. See the ticket.

Basically, this bug was closed (invalid) because they have decided to change the animation implementaion, from “source transition” model to “destination
transition” model.
(Read the whole explanation)

Stay tuned for the new documentation from WebKit or Apple!

UPDATE / CORRECTION (July 23, 08) – please see “More Update on CSS Animation”

WebKit CSS Animation Examples

According to WebKit.org, the WebKit supports the simplest kind of animation called a transition.

Transitions are specified using the following properties:

• transition-property – What property should animate, e.g., opacity.
• transition-duration – How long the transition should last.
• transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
• transition – A shorthand for all three properties.

Last week, I’ve noticed that Apple had published some new documentations at Developer Connection, including
Safari CSS Animation Guide for iPhone OS and Safari CSS Transforms Guide for iPhone OS (Go to download page).
Since I read the WebKit.org blog entry last year, I was interested in the CSS animation so I finally decided to give it try.

I spent some time writing several CSS tests, ran on several different WebKit browsers. and my conclusion is that:

1. the animation and transforms are pretty buggy on current iPhone Safari.
2. the current WebKit nightly (as of July 19) has some bugs so animation doesn’t work when swapping class names

with oncick event handler attributes like, using this.className='newClassName'.

The className swap was working perfectly, until I installed the newer build, r35231.
I will file the bug to Webit.org soon.

On latest build, build r35075 – r35231 (the newest one 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…

UPDATE / CORRECTION (July 23, 08) – please see “More Update on CSS Animation”

I still haven’t gotten a chance to try iPhone 3G yet, and I tested only on my old iPhone with the latest upgrade.
Are there any differences in between two Safaris? I doubt it.

Anyway, Open the test page I wrote in a new window!

Animate Opacity

Opacity Transition Test

Expected result: When a user mouse-overs the box, an object appears smoothly (opacity=.5) in 2 sec.
On mouse-click, the image fades in completely (opacity=1).

	
.box1 img{
	opacity: 0;
	-webkit-transition: opacity 2s ease-out;   /* shorthand for all three properties */
}
.box1 img:hover {
	opacity: .8;
}
	

	
<div class="box1">
	<img src="images/apple.png"/>
</div>
	

Animate Position – Move to right

Position Transition Test

Expected result: the image moves to the right as fading out.

	
.box2{
	opacity: 1;
  	-webkit-transition-property: opacity, left;
	-webkit-transition-duration: 1s, 1.5s;
	transition-timing-function: ease-in;
}
	

	
<div class="box2" onclick="this.style.opacity='0'; this.style.position='relative'; this.style.left='500px'">
	<img src="images/apple.png"/>
</div>
	

Animate Letters – Letter-Spacing

Letter-Spacing Test

Expected result: When the text is clicked, each letter spaces out as fading away.

It is pretty cumbersome to handle multiple style properties with onclick, so I added a JavaScript function to take care:

	
function switchStyles(style,obj) {
	for(var prop in obj)
		style[prop] = obj[prop];
}
	

UPDATE / CORRECTION (July 23, 08) – You don’t need this hassle with JS. Please see “More Update on CSS Animation”

	
.box3{
	color: green;
	opacity: 1;
  	-webkit-transition-property: opacity, letter-spacing;
	-webkit-transition-duration: 1.5s, 2s;
	transition-timing-function: ease-out, linear;
}
	

	
<div class="box3"
     onclick="switchStyles(this.style,{
	    color : 'lime',
	    opacity : '0',
	    letterSpacing : '3em'
});">
	some text to be clicked here.
</div>
	

Transform – Click to spin the image and fade away

Position Transition Test

Expected result: the image rotates twice (360 deg x 2) around the Z axis, as fading.

	
.box4{
  	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 2s;
	transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); /* equivalent to ease-in-out */
}
	

	
<div class="box4"
	 onclick="switchStyles(this.style,{
	    webkitTransform: 'rotate(720deg) translate(1000px,0px)',
		opacity: '0'
});">
	<img src="images/apple.png"/>
</div>
	

Also, I tried CSS gradients. These still don’t seem to work on iPhone but worked on all recent WebKit nightly.

CSS Gradients – Linear and Radial

Gradients Test

Expected results:
Linear – Green to white top-to-bottom linear gradient
Radial – White to pink center-to-outer radial gradient
Actual results:
Nicely working on WbKit nightly builds. Failed miserably on both Mac desktop and iPhone Safari 3.1.

Screenshot of the results on WebKit nightly


The syntax is as follows:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

	
#gradientLinear{
	float: left;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(linear, left top, left bottom, from(rgba(158,192,0,.85)), color-stop(1, #fff));
}

#gradientRadial{
	float: left;
	margin-left: .5em;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(radial, center center, 3, 80 80, 100, from(rgb(255,255,255)), to(rgba(228,56,132,.85)), color-stop(0%,#fff));
}
	

Resources:

1. Surfin’ Safari – CSS Animation
2. Surfin’ Safari – Introducing CSS Gradients
3. Safari CSS Animation Guide for iPhone OS
4. Safari CSS Transform Guide for iPhone OS

Y!Go Can Has Cheezburger?

Last time I made CuteOverload into Apple iPhone WebApp, “iCuteOverload“, so this time I made I Can Has Cheesburger? into Yahoo!Go mobile widget.

Try it on Yahoo! Go client, or open up an web browser in your mobile device and go to http://beta.m.yahoo.com, login, go to “widget” by clicking the icon looks like a tool on top and add “I Can Has Cheezburger?”. Works on iPhone at the URL too!

Dev.mobi Event at Palo Alto

Today, I had a chance to attend dev.mobi developers’ session at Palo Alto.

I am actually a user of their web tools and documentations, and really like the way they are trying to set standard for developers.

In today’s session, I was able to find out more about their ongoing projects. Paul Nerger of dotMobi, explained the interesting new product from them is called Device Atlas. This is a comprehensive database of mobile device information, such as hardware info, OS, browser. supported graphic format etc., with easy-to-follow GUI. The first version was just released a few months ago and they are now working on new features such as integrations with Ready.mobi test suite, W3C checker Firefox plugin, providing analytics and competitive benchmarking.

One of the biggest pain for me to work on mobile web is a cross-browser issue. Surely there’re thousands of mobile devices means thousands of different browsers. I already appreciate for the OMA and WURFL for the data, so with more partners like Nokia, Vodafone, Volantis etc. Device Atlas seems to be so promising fore more accurate info.The data is available as json files. So for example, to get the screen resolution of a certain device, get the UA and simply call its json data.

By the way, just like me, Paul doesn’t like the term “WAP”. I do use the term to distinguish it from desktop web, but I always felt some sort of awkwardness to say it. Yeah, WAP rhymes with crap, right Paul!

Opera Lanches Widget SDK

Today, Opera launched Widget SDK, enabling web developers to deploy web apps on desktop, TV and mobile devices. Unlike Apple’s iPhone $99 SDK, it is free of charge.

Watch the step-by-step instruction video:

More Mobile App/Widget SDKs:

• Apple: iPhone SDK
• Google: Android SDK
• Yahoo!: Blueprint SDK (this is what I am working for)
• Nokia: Widset
• Openwave: Mobile Widget
• Plasmo: Widget

Boring Friday night activity – fixed UI glitch on iCO

I’ve been sick and still recovering from.
Anyway, my iPhone WebApp, iCuteOverload became look uglier after a few firmware updates ago and I had ignored since, but I finally fixed today.

It looks like box-sizing: border-box stopped woking on the recent WebKit, so I needed to use WebKit’s own declarations by adding “-webkit-” prefex, to adjust the box-model. It was easy fix but didn’t figure out soon enough :-p (maybe because I was watching House M.D. while debugging). Then I looked at the latest iUi code and well, the fix was already there… I should have just downloaded from beginning.

Oh well.

iPhone SDK is Out

Apple’s official iPhone Dev Center page is updated, and there’s a link for the newly announced
SDK. Time to learn Cocoa?

Actually, I wonder how long it takes to over-number Symbian S60 apps.

Adding a WebClip Bookmark Icon for iPhone and iPod

While MacWorld is held here in San Francisco, I am commuting to Sunnyvale… At least I am trying to catch up with all these exiting news from Apple.

One iPhone dev-related announcement caught my attention is a WebClip. -The WebClip is a web bookmark icon that is displayed on start screen on iPhone (and iPod), and looks just like an application launch button. (To make it work, you need to upgrade the firmware to 1.1.3.)

To create a custom icon is as easy as adding a favicon.ico for desktop website.

First, create a 57×57 png image. (Don’t worry about round-corners and shine.)

Then do either:

1) Place a PNG image named apple-touch-icon.png at the root directory of your web server.

or

2) Add <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

Once added to the springboard screen, round-corners and glassy overlay will be added to your icon nicely

Sweet! Y!Go Web Made News in Japan too

自分がコアメンバーの一員として制作したプロダクトが日本のニュースでも紹介されているなんてちょっと嬉しいかも。

Anyway, it’s pretty sweet that I can show what I’ve been working my ass off for, to my friends and family in Japan. I wish we could launch this in Japan, as well as Europe and Asia that we’re planning to launch soon. But since Y! Japan is operated separately from us, I dunno if they will…

Well anyway, I’ve tried oneSearch in Japanese (see the screenshot), although we are not supporting Japan. Well, the temperature is shown in fahrenheit in weather section, because well of course, this is a US product. -will I18N’d later… Pretty neat, right? Seriously Y! Japan should consider, since Apple will start selling iPhone there sooner or later. I guess.

I found more news by searching just now:

• 【2008 International CES】米Yahoo!、「Yahoo! Go 3.0」を発表。
• ヤフーのヤンCEO、CESで講演–「Yahoo Go 3.0」ベータなどを披露
• Yahoo!，モバイル機器向けアプリ開発プラットフォームや「Yahoo! Go 3.0」を発表
• Yahoo!、モバイルサービスを刷新