Как синхронизировать с hover'ом анимацию на странице?

Question

[Monster_King]

На странице имеется несколько элементов, которые в цикличной анимации меняют цвет через "filter: hue-rotate". Кроме того, есть ссылки, которые изначально серого цвета, но при наведении меняют свой цвет, плюс на этот цвет также накладывает фильтр. Проблема в том, что анимация на странице начинается с момента загрузки страницы, а на ссылке - при наведении курсора, и итоговый цвет элементов не совпадает.

Как синхронизировать анимацию так, чтобы цвет ссылки под hover'ом (градус поворота hue-rotate) был таким же, как у остальной анимации на странице?

Пример проблемы.

Comments

[Hyubert]

наверное, так...

h1:hover,
a:hover {

[regix]

Hyubert: при чем тут ховер на заголовок?

[Hyubert]

regix: извиняюсь, не понял до конца вопрос

Answer 1

[regix]

Попробуй через атрибуты. Т,е. примени эту анимацию на текстовый атрибут и делай его видимым на ховер.

Проблема в том, что эта анимация срабатывает в разное время же - на заголовок при загрузке, а на линки - при ховере. Естественно у них синхрон разный.

Answer 2

[twobomb]

Только костыли.