Equivalent to jQuery.animate step function when using CSS3 transitions

Question

I am using CSS transition in animation circles (nodes) around the screen.

CSS

.circle {-webkit-transition: all 0.8s ease-in-out; } 

JS:

  $('.circle').css({ webkitTransform: "translate3d(20px, 20px, 0px)" }) 

I would like to always know the translation properties, so I can update the lines connecting the nodes.

If I used jQuery animation, I could use the step function. Is there something similar in CSS transitions? I saw the "webkitTransitionEnd" event, but did nothing for the individual animation steps.

Or do I need to do this with timers?

Answer 1

In theory, you can use a timer and get the calculated values ​​of an animated element, but are almost guaranteed to work slowly. I never felt the need to access the calculated values ​​step by step and only started 2 or more animations at a time.

If you want to animate more complex things, such as circles with lines between them, you should consider using a canvas library such as raphael .

There are already some similar demos, like the ones you are trying to complete, for example this one.