Is there a way to smoothly change the target position or attributes of a running transition without halting it?
To illustrate, let's consider this initial animation:
-webkit-transition:-webkit-transform 5s ease-in-out
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);
If I use JavaScript to set new values for translate3d or rotate before the current transition finishes, the transition stops and then starts towards the new values. This interruption is not what I desire.
Is there a method to achieve a seamless transition to new values without stopping the ongoing transition? Alternatively, are there other approaches that avoid using JavaScript to handle animations by modifying properties like top/left in favor of CSS animations?
Thank you.