Have you ever noticed a strange "blinking" effect when layering multiple CSS rotation keyframe animations on top of each other? Check out this Codepen example to see it in action: https://codepen.io/JoshuaVB/full/bGevLbR.
@keyframes waves{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
This peculiar issue seems to be specific to iOS 13 and older versions. While it may occasionally work on iOS 13 emulators, it rarely functions for extended periods on iOS 12 and below. Interestingly, it works flawlessly on all other browsers and devices.
Interestingly, when the layers are viewed individually, the blinking effect appears to be less pronounced. However, as more layers are added, the instability and blinking seem to intensify in the final product.