CSS3动画停止工作 - 生产

Question

我有一个拉拉维尔项目，并在生产环境中使用拉拉维尔长生不老药。gulpfile.js看起来像：

const elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;
elixir((mix) => {
    mix
    .styles('theme/*.css', 'public/css/vendor.css')
    .scripts('theme/*.js', 'public/js/vendor.js')
    .scripts('custom/*.js', 'public/js/app.js')
    .version([
        'css/vendor.css', 
        'js/vendor.js',
        'js/app.js',
    ]);
});

我有一个用于心位的 CSS3 动画：

.bell {
  position: relative;
  margin-top: -30px;
}
.bell .heartbit {
  position: absolute;
  top: -20px;
  right: -16px;
  height: 25px;
  width: 25px;
  z-index: 10;
  border: 5px solid #ff7676;
  border-radius: 70px;
  -moz-animation: heartbit 1s ease-out;
  -moz-animation-iteration-count: infinite;
  -o-animation: heartbit 1s ease-out;
  -o-animation-iteration-count: infinite;
  -webkit-animation: heartbit 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.bell .point {
  width: 6px;
  height: 6px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #ff7676;
  position: absolute;
  right: -6px;
  top: -10px;
}
@-moz-keyframes heartbit {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -moz-transform: scale(0.1);
    opacity: 0.1;
  }
  50% {
    -moz-transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    -moz-transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0;
  }
}
@-webkit-keyframes heartbit {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -webkit-transform: scale(0.1);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

动画工作正常。但是，当我运行gulp --production时，它会停止工作。我尝试手动缩小 https://cssminifier.com/curl 中的css文件，即使使用缩小的文件，动画仍然有效。但是，不知何故，它仅在gulp --production我在这里错过了什么？我应该研究什么？

Answer 1

您为心形动画定义了 @-moz 和 @-webkit- 但您忘记为其定义标准关键帧。某些简化器会删除带前缀的声明，因此您根本没有动画声明。