http://mydailyphoto.com/blog/iphone-safari-flick-navigation/

The animation needs to follow the movement of the finger *as the finger moves*. For example, go to the weather app where you have more than one panel. As you move your finger horizontally across the screen, the panel moves along with it. When you slide your finger all the way over to the edge, the panel moves off the screen and the next one slides into place. Now, if you do this really fast, as in a flick motion, all this happens in an instant.

It is possible to duplicate this behavior with CSS transforms, but this isn’t the way to do it.

Just one note, for anyone interested in doing something similar, that the code can be simplified by making use of the CSS “-webkit-transition-property”. You can specify that “-webkit-transition-property” be set to “left”, then when the left property value is changed, the transition will animate the element to its new position; based on the “-webkit-transition-duration” and “-webkit-transition-timing-function” settings.

Hope that helps anyone else looking to do something similar.

Yes, you can use it to animate colors, border sizes, opacity, and pretty much any other CSS property. So, for instance, you could do a nice Scriptaculous-esque fade-out without Scriptaculous. I’m sure that the iPhone Safari Developer page has some more insight on exactly what properties are supported; I suggest you go there for the final word.

To answer your question about the trigger, do it through JavaScript. For instance, in the example in the blog post, I’d change the class name of a DIV to ‘divSlide’ through JS. This would then grab the styles for the new class, sees the animation call, and pulls up the keyframes.

Check out the blog entry I wrote (the ‘myDailyPhoto’ link above) for a whole bunch of information on this stuff.

- Matt Congrove

Say, does the ‘animation’ and ‘keyframe’- from and to keywords state, that it can actually do much more than just move objects? Like if I tell the stylesheet to animate…

from { background-color: green; }
to { background-color: blue; }

..will it animate the background? And how is the animation triggered?

Well done.