CSS3 animation stops to work on gulp --production - css

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.