CSS3 动画停止工作 gulp --production

Question

我有一个 laravel 项目并在生产环境中使用 laravel 长生不老药。 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 heartbit 动画：

.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

您为 heartbit 动画定义了@-moz 和@-webkit-，但忘记为其定义标准关键帧。一些缩小器删除了前缀声明，因此您根本没有动画声明。

CSS3 动画停止工作 gulp --production

CSS3 animation stops to work on gulp --production

css

gulp

laravel-elixir