Question

Is it possible to force jquery use CSS3 transitions for its fadeIn fadeOut effects?

It’s a mobile only site so I’d like to squeeze as much performance as possible out of it.

Answer 1

First Google result is the jQuery animate enhanced plugin.

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and
Opera and convert animations automatically. Compatible with IE6+

Properties supported: (more to come)

• left/right : using translate(x, y) or translate3d(x, y, z)
• top/bottom : using translate(x, y) or translate3d(x, y, z)
• opacity
• width
• height

According to this page, you should set the plugin’s useTranslate3d option to true for smoother (hardware-accelerated) animation on iDevices.