Change position/target values of webkit css transition without stopping it?

Is it possible to change the target position or attributes of a transition that is running without stopping it, so it's like a smooth transition?

Let me explain an example, lets say my initial animation is the following:

-webkit-transition:-webkit-transform 5s ease-in-out
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);

I set this with javascript, what if before this transition reaches its end, I want to change the translate3d or rotate to new values, but i don't want to stop the transition I want it to smoothly transition to these new values without interupting the running transition. If I set new values with javascript it first stops then starts tr开发者_如何学运维ansitioning towards these new values, this is a undesired effect for me.

Is this in any way possible? Or is there another way togo about it, I do not want to use javascript todo the animation by modifying properties like top/left I prefer css animations.

Thanks

I think the best, and most adjustable way is to do the transitioning with JS. Let the JS change the transforms. The JS knows how far it is in the transition, and you can adjust the 'path' to accommodate the new target position. You could even implement bezier curves, for smooth curves in case the direction is different.

It is however a hell of a lot more work.