After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working.
I'm puzzled as to why this is happening, especially since I've included keyframes that are compatible with all web browsers.
When running my app on localhost (npm start), everything looks fine:
https://i.sstatic.net/ytkrE.gif
However, once it's hosted on Firebase, the animations don't seem to work:
https://i.sstatic.net/1kBJv.gif
It appears to be having trouble reading my keyframe animations.
Here's a snippet from index.js:
// Code block imported from index.js
...
And here's App.js:
// Code block imported from App.js
...
The HomePage.js file contains:
// Code block imported from HomePage.js
...
These CSS rules are defined in HomePage.module.css:
// Code block describing CSS styles for the home page
...
AnimatedSlideShowText.js includes:
// Code block related to AnimatedSlideShowText component
...
This animation module can be found in AnimatedSlideShowText.module.css:
// Code block showing CSS animations for slide show text
...
If more source code is necessary to address the problem, please let me know. Any assistance in resolving this animation issue post-build and deployment would be greatly appreciated. Do you think using module.css could potentially affect animations in the deployed version? Your insights would be invaluable; thank you in advance for your help.