How to fast-blur in css/js?

Question

I am having a performance issue when combining blurred images with some subpixel translate animation (I am using jQuery Transit):

filter: blur(5px);^

On mousemove, blur is recalculated to simulate Depth-of-Field. When moving, the elements aren't moving as fluid as I would like them to be.

Demo here

Buggy movement appears when you click on a bottle in a -webkit browser

Any idea/tips how I could accelerate this?

I was thinking about pre-calculating every focus step and using opacity but this is the last solution I would use.

Answer 1

It looks like you're translating and scaling the images at the same time, which is causing the jumpiness. Try using translate3d -webkit-transform: translate3d(x,y,z) instead and modifying the z position instead of scaling. This should help quite a bit with performance as your animations will now be hardware accelerated.