Recently in a little experiment, i made a rather cool demo which makes use of CSS Transforms, combined with CSS Transitions.
Note: Examples only work in Safari 4+, or other recent webkit-based browsers.
“Cool?” you say. Well admittedly i could have gone for something a bit more elaborate, however as it stands it pretty much serves its purpose – that is to demonstrate that using the magic of CSS Transitions you can create fast, useful web effects which run at acceptable framerates on an iPhone, and even on the desktop (since the tweening of properties is done by the browser).
However to get this admittedly simple demo working, i had to battle through a few odd issues with how these transitions operate.
The problems
To start off, resetting transitions is a bit tricky. Since properties are not processed immediately, you need to wait for the browser to detect you have reset transition values before you transition to any new values.
Thankfully a nice event called webkitTransitionEnd is provided which is fired as soon as a transition is complete, so you could conceivably use it to handle resetting the transition.
The only problem? webkitTransitionEnd seems to only fire when it feels like it.
The above example demonstrates the peculiarity of webkitTransitionEnd. The green/pink circle is meant to change colour every time the event is fired. Since there is an interval running every 100ms which changes the rotation of the circles, what typically happens 99.9% of the time is the transition never really ends, thus no event.
In general, the transition event seems to behave as follows:
| Setting… | Result |
|---|---|
| Initial transition (element just created) | FAIL |
| Transition continuously (during transition) | MOSTLY FAIL |
| Transition after a sufficient undefined delay | PASS |
So safe to say, unless you’ve got a transition you aren’t going to mess about with then don’t rely on webkitTransitionEnd.
Onto quirky platforms…
Finally, with regard to the iPhone platform there are even more quirks. Compared to desktop Safari, the tweening acts quite differently.
One notable quirk is if you make a new element with a transition on Desktop safari, it performs that transition. If however you do the same thing on Mobile Safari, the transition starts at the end. Whether or not this is some bizarre timing issue, i have no idea.
So safe to say, while CSS Transitions are a powerful tool to use, beware of the quirks.
