transform: scale() translate() 一起用的打包问题

最近在写一个自定义动画，就浏览器和页面打开，动画都正常运行。

但是，用webpack打包后，动画就失效了！

原因是之前的代码是：

 .heart {
        animation: myfirst 3s infinite;
        width: 0.76rem;
        position: absolute;
        top: 4rem;
        left: 62%;
      }
      @keyframes myfirst {
          0% {
              transform: scale(1,1) translate(0px, 0px);
          }
          50% {
              transform: scale(1.1,1.1) translate(0px, 10px);
          }
          100% {
              transform: scale(1,1) translate(0px, 0px);
          }
      }

其中，只要scale的值变了，这个动画就失效了

后来把代码改掉了，如下：

 .heart {
        animation: myfirst 3s infinite;
        width: 0.76rem;
        position: absolute;
        top: 4rem;
        left: 62%;
      }
      @keyframes myfirst {
          0% {
              transform: scale(1,1) translate(0px, 0px);
          }
          50% {
              transform: scale(1,1) translate(0px, 10px);
          }
          100% {
              transform: scale(1,1) translate(0px, 0px);
          }
      }

把scale的值都设置成1，1，这样的，动画开始正常了。

根据经验所得，要么只写scale 的变化，要么只写translate的变化，当两者放在一起的时候，不使用webpack打包的时候，动画正常运行，但是打包后，就不生效了。

看了压缩后的代码，并没有发现异常。。

 

具体原先还未知，希望知情者相告，谢谢！