jquery - CSS3 transitions in chrome browser -

i using css3 transition animation div element. need animate left , top position of div element whenever hovering on specific points in chart. please refer our svg chart.

in chrome when animating div element, div position starts top of browser , smooth transition worked. every first time starts top of browser , animate. working fine other browser. please refer below div element code.

 $(tooltipdiv).css({                 'transition-property': 'left,top',                 '-moz-transition-property': 'left,top', /* firefox 4 */                 '-webkit-transition-property': 'left,top', /* safari , chrome */                 '-o-transition-property': 'left,top',                 '-webkit-transition-timing-function':'linear',                 'transition-duration': series.tooltipoptions.duration,                 '-moz-transition-duration': series.tooltipoptions.duration, /* firefox 4 */                 '-webkit-transition-duration': series.tooltipoptions.duration, /* safari , chrome */                 '-o-transition-duration': series.tooltipoptions.duration /* opera */             }); 

i don't want animation starts top of browser. how can resolve chrome browser ?

thanks,

siva

for work cross browser must have setup values transition-property, transition-timing-function , transition-duration in place before make change top or left. otherwise transition not fire.

transition-property , transition-timing-function both setup in css instead of javascript because values not dynamic. lets move there. should provide 'start' values top , left can go in css well.

next need set transition-duration in css before change top , left, luckily can simple jquery chaining.

demo