Почему при использовании кейфреймов (keyframe) два элемента начинают анимироваться не синхронно?

Question

[Денис Букреев]

Такие дела.

Есть на странице SVG-логотип и фоновая картинка.
У логотипа свой keyframe, который создает анимацию пульсации.
У фона тоже свой keyframe, который так же задает анимацию пульсации.

У обоих выставлено одинаковое время выполнения анимации и одинаковый тип - ease-out

Но вот при загрузке страницы они не синхронизированы, каждый стартует в свое время и всегда по-разному - от чего это может зависеть?

И как заставить их одновременно стартовать?

Answer 1

[Дмитрий Лузанов]

Возможно анимация выполняется по мере подгрузки css. Попробуйте активировать её через доп. класс, добавляемый через js по событию загрузки документа.

Comments

[Денис Букреев]

Да, так и сделал)