JQ 修改styleSheets关联keyframes 实现多段transform

场景：用的某可视化的云上产品 ，无法修改其前端代码，只能从hook里添加js；

需求：客户希望其地图组件有个左右摇摆旋转的动画；

遇到的问题:刚开始是想用animate()，但是animate()与transform不兼容，只能回调transform，即：

$(this).animate(
        {},
        function () {
          $(mapAnim.container).css({ "transform": "rotate(" + (-15) + "deg)", "transition": "all " + 4 + "s linear " + 2 + "s" });
        }
      );

但问题是有多段动画，这样只能实现一段；即使是使用多个animate（）按序列执行，也无法实现，只会执行最后一个animate（），原因是transform只能在回调函数中，而回调函数是在动画执行完成之后执行，其本质与单一更改css样式没有区别，即等于

 $(mapAnim.container).css({ "transform": "rotate(" + (-15) + "deg)", "transition": "all " + 4 + "s linear " + 2 +