Hello everyone, I'm facing an issue with my LESS animation. When I deploy my app on the server after using ng build --prod, the CSS animations are not visible in browsers. They work perfectly fine on localhost but fail to work after deployment and I can't figure out why.
Localhost: https://i.sstatic.net/qxE8C.png
My website: https://i.sstatic.net/nP1jN.png
angular.json:
"options": {
"outputPath": "dist/website",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.less"
],
"scripts": [
"./node_modules/hammerjs/hammer.min.js",
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Keyframes mixins:
.keyframes(rollimg, {
0% {
right: -300px;
opacity: 0;}
50% {
right: 0;
opacity: 0.8;}
60% {
right: -40px;}
100% {
right: 0;
opacity: 1;}
});
.keyframes (scrollup, {
0% {
top: 0;}
50% {
top: 10px;}
100% {
top: 0;}
});
Both animations do not work as expected. Can anyone point out what mistake I might be making?