My angular 4 project has animation added in a CSS file, with classes applied to elements for animation on page load. However, it is currently not working properly on the first page load. The app takes time to fully load and the CSS animations apply intermittently. Once the page is fully loaded, the animations work fine, but I want them to work on the first page load.
I have considered two solutions so far. One option would be to load the animation file after the app loads, but I am unsure of how to implement this.
Another approach could involve using JavaScript to add classes on page load, but this method might slow down the loading time and require additional code for different components.
Is there a more efficient way to achieve the desired result?
Any assistance or suggestions would be greatly appreciated.