CSS3 animation stops to work on gulp --production

Question

I hava a laravel project and using laravel elixir for production environment. The gulpfile.js looks like:

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',
    ]);
});

I have a CSS3 animation for 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;
  }
}

The animation works fine. But, when I run gulp --production, it stops to work. I tried manually minifying the css file from https://cssminifier.com/curl and the animation still works, even with the minified file. But, somehow it fails only on gulp --production What am I missing here? What should I look into?

Answer 1

You defined @-moz and @-webkit- for your heartbit animation but you forgot to define the standard keyframe for it. Some minifiers remove the prefixed declarations so you are left with no animation declaration at all.