Why do two elements start to animate out of sync when using keyframes?

Question

css

So it goes.
There is an SVG logo and a background image on the page.
The logo has its own keyframe, which creates a ripple animation.
The background also has its own keyframe, which also sets the ripple animation.
Both have the same animation execution time and the same type - ease-out
But when the page is loaded, they are not synchronized, each starts at its own time and always in a different way - what can it depend on?
And how to force them to start at the same time?

Answer 1

Perhaps the animation is performed as the css is loaded. Try to activate it via addon. class added via js on document loading event.