javascript - Shaky scale animation -

i doing little mosaic (if can call that). changing scale , opacity based on position mouse , center of picture/div.

i calculating distance via vektors

 function calculatedistance(elem, mousex, mousey) {         return math.floor(math.sqrt(math.pow(mousex - (elem.offsetleft + (elem.offsetwidth / 2)), 2) + math.pow(mousey - (elem.offsettop + (elem.offsetheight / 2)), 2)));     } 

and im looping throught divs/pictures , if distance smaller 100 , calculates opacity/scale.

but came problem , animation of changing opacity/scale little bit shakky. seems hesitating if should something.

demo = http://jsfiddle.net/trolstover/x9fpv8pb/5/

is there way or shortcut how fix called shakking or hesitating?

the biggest problem have -webkit-transition rule in css. if try transition elements css , change value 60 times second js, flicker.

also, shouldn't add event listener every single element. cause unnecessary operations. instead, can add 1 on parent (i added nav).

there room optimizing also, further smoothens out transition. here's result:

http://jsfiddle.net/ilpo/x9fpv8pb/16/