最近在写一个自定义动画，就浏览器和页面打开，动画都正常运行。
但是，用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打包的时候，动画正常运行，但是打包后，就不生效了。
看了压缩后的代码，并没有发现异常。。
具体原先还未知，希望知情者相告，谢谢！