CSS animations can cause performance issues when they trigger main thread activity. The browser compositor thread can handle animations more efficiently, but only for transform and opacity properties. Converting a cloud animation from using the left property to translateX eliminated main thread noise, while a sun animation using box-shadow couldn't be easily converted and was made static instead. Using will-change and limiting animation iterations with animation-iteration-count further improves performance.
Sort: