Как отключить css animation при загрузке страницы?

Question

[martuwka]

Есть анимация, которая срабатывает при наведении курсора - https://jsfiddle.net/fprmjbvd/3/. Но при загрузке страницы или при переходах между страницами (этот блок размещен в header-е) срабатывает произвольно обратная анимация - нажмите "Run" - увидите (при том, что вы еще и курсор не наводили).

Пробовал добавлять к body класс preload, к preload-у в стилях добавлял -webkit-transition: none !important; и -webkit-animation: none !important; и в скрипте прописывал - после загрузки страницы - preload убирать - вот ссылка этого решения - https://css-tricks.com/transitions-only-after-page....

Но оно не работает, анимация просто не срабатывает вообще. Сколько искал в Рунете и в зарубежном - одно это решение. Почему оно не работает у меня - без понятия. Как можно решить этот вопрос?

Comments

[martuwka]

Никита Полевой, не работает

[Kovalsky]

martuwka, а, ну да, и не должно работать. Я просто не дочитал до конца.

И почему же у вас с классом preload не работает? Фишка в том, что не работать оно не может. Вы просто что-то делаете неправильно. Можете сделать пример, а можете сами убедиться в правильности алгоритма: при загрузке у body должен быть класс preload, этот класс должен отключать анимацию у всех элементов; после загрузки этот класс должен сниматься. Если не работает, значит вы какой-то из этих пунктов не выполняется.

[martuwka]

Никита Полевой, вот, всё сделал, так же и у себя - https://jsfiddle.net/fprmjbvd/5/. Не работает всё равно

[Kovalsky]

martuwka, во-первых, у вас не снимается класс preload, т.к. вы устанавливаете обработчик на load уже после того как это событие произошло, ведь jsfiddle по умолчанию весь код выполняет в onload.
Во-вторых, вы для элемента устанавливаете дефолтную анимацию, она и должна будет стартовать как только будет установлена. Думаю тут найдёте решение.

[martuwka]

Никита Полевой, спасибо, решение по ссылке нашел.

Answer 1

[AnotherStar]

Эммм... Если правильно понял, то нужно просто убрать анимацию из .button-container-1 a, оставить только для .button-container-1 a:hover. При этом анимация не будет запускаться при загрузке страницы, только при наведении курсора.