I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not animate at all.
Could someone suggest the best solution to this problem?
Below is the CSS code for the animation:
.loader {
color: #ffffff;
font-size: 20px;
margin: 100px auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load4 1.3s infinite linear;
animation: load4 1.3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load4 {
/* Keyframe animation code */
}
...
To visualize the issue, you can view this Stackblitz example where a timer triggers an event every second in the background: