Animating opacity on various platform

I've been having great succes with a product demo that fades in and fades out as the user selects elements on the page. On desktop platforms I've been doing this fading using a simple jQuery opacity animation.

$([LIGHTBOX.left, LIGHTBOX.top, LIGHTBOX.right, LIGHTBOX.bottom]).animate({ opacity: 0.75 }, 'slow');

Unfortunately on the iPad and iPhone this animation is horribly slow. On the iPad I see about two animation frames, on the iPhone it's two to four frames. The iPhone is most likely faster because of its lower resolution. But to be effective the animation has to be smooth, with at least 15 frames per second. I've tried improving performance by using webkit's new transitions.

.lightbox {
	background: url(black.png);
	opacity: 0;
	position: absolute;
}

.blurred {
	-webkit-transition: opacity 1s;
	opacity: 0.75;
}

So when you have a lightbox element it's fully transparent (opacity: 0). Then when you add the blurred class to that element, it will transition the opacity to 0.75 over one second. Again: on desktop browser (Chrome and Safari only in this case) the transition is smooth. But also again: on iPhone and iPad, the transition is clunky. Maybe it's a bit better than the jQuery version, but nowhere near usable.

Demo and test

Below are demos of the techniques described above. Use it to see what animation smoothnes you get on your target platform.

jQuery

This is the target area for the jQuery animation. If you click/touch this area, it will be faded out over a period of 3 seconds.

CSS transition

This is the target area for the CSS animation. If you click/touch this area, it will be faded out over a period of 3 seconds.