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

【问题标题】：CSS3 animation stops to work on gulp --productionCSS3 动画停止在 gulp --production 上工作
【发布时间】：2018-08-09 08:50:38
【问题描述】：

我有一个 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',
    ]);
});

我有一个用于 heartbit 的 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 上失败了我在这里错过了什么？我应该调查什么？

【问题讨论】：

您为heartbit 动画定义了@-moz 和@-webkit-，但您忘记为其定义标准关键帧。也许这会导致问题，因为缩小器有时会删除前缀声明。
@CataJohn 谢谢。那成功了。如果您发表评论作为答案，我会接受。

标签： css gulp laravel-elixir

【解决方案1】：

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

【讨论】：