css3动画能通过javascript控制变速播放吗？

Question

需求：我有一段10s的动画，内容是使一个小球由0运动到1000的位置，在0-10s之内的某秒，点击一下小球，使得剩下的动画内容以原来速度的2倍播放；需求解释：比如，小球运动了5s，既运动到了500的位置，然后我点击了一下小球；剩下的500距离我希望2.5s播放完成；问题：单纯靠css3动画+js控制能否实现，应该查哪个api？不考虑canvas，因为canvas有尺寸限制；另我已知gsap能够通过timelite实现，所以仅限探讨css3的控制；

Answer 1

try transformjs

like this
demo