CSS3/JS get position of element during animation

Question

I need to get position of element like (with jQuery)

$(\".mydiv\").position().left;

However I need to do it during css3 translate ani

Answer 1

Edit

"I'm not using .animate for simple animations since css3. – Kluska000"

Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.

See also window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Try (see console at jsfiddle, linked below)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

See http://api.jquery.com/animate/ at start , step , progress