CSS3动画停止在gulp --production上工作

Question

我有一个laravel项目，并使用laravel elixir生产环境。 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-但是您忘了为它定义标准关键帧。一些minifiers删除前缀声明，因此你根本没有动画声明。