I’ve been doing a lot of work with the iPhone lately and I’ve been holding back on blogging about my experiences because I’m unclear as to the damn NDA stipulations. NDA be damn, here’s a first in a series of posts!
If you aren’t familiar with the new animation framework that’s built into Mobile Safari you can read about the closest thing on WebKit, CSS transitions. Here is an example of a CSS transition:
<div style="-webkit-transition: opacity 2s ease-in" onclick="this.style.opacity='0'"> This div will do a fade when clicked only Safari 3.1 or on the iPhone! </div>
This div will do a fade when clicked Safari 3.1 or on the iPhone
Essentially you tie a timing function and duration when a css property is changed. CSS animations allow for more complex rule transitions. For example, if you want to have a card flipping effect show in this video, you will need to use CSS animations.
(more…)