Как отменить (не запускать) анимацию при первом запуска/обновлении страницы?

Ссылка скопирована
CSS HTML JavaScript
2 марта 2026 1 ответ

Я вас категорически приветствую. Сделал такую анимацию. Хочу чтобы при запуске/перезагрузке страницы анимация не срабатывала. Подскажите, пожалуйста, как это можно сделать?

https://codepen.io/Vlad096/pen/wvOqMve

Дополнительно:

А когда должна срабатывать? Снять с неё класс или идентификатор(навесить чёрный квадрат или style="display: none")

  • Marcenary, При ховере только и плавно назад возвращаться когда убираю курсор

    • Ответы:

    Надо использовать не анимацию, а просто состояния с переходами:
    https://codepen.io/FragsterAt/pen/xxBLPEz

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Стас DB Ответ

    Для отмены анимации при первом запуске или обновлении страницы можно использовать различные подходы в зависимости от того, какая анимация используется и как она инициируется.

    Если анимация запускается с помощью CSS, то можно добавить класс к элементу, который запускает анимацию, только после того, как страница загрузилась. Для этого можно использовать JavaScript. Например, если у вас есть элемент с классом "animated" и анимация задана через CSS класс "fadeIn":

    document.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".animated").classList.add("fadeIn");
});

    document.addEventListener("DOMContentLoaded", function() { document.querySelector(".animated").classList.add("fadeIn"); });

    Если анимация запускается с помощью JavaScript, то можно просто не вызывать функцию или не добавлять класс, который запускает анимацию, при первом запуске страницы. Например, если у вас есть функция "runAnimation()":

    document.addEventListener("DOMContentLoaded", function() {
  // runAnimation();
});

    document.addEventListener("DOMContentLoaded", function() { // runAnimation(); });

    Если анимация запускается автоматически при загрузке страницы, то можно использовать CSS свойство "animation-play-state" и установить его в значение "paused" для анимации при первом запуске. Например, если у вас есть анимация с классом "animation":

     
  .animation {
    animation-play-state: paused;
  }

    .animation { animation-play-state: paused; }

    Таким образом, вы можете легко отменить анимацию при первом запуске или обновлении страницы, используя различные методы в зависимости от вашего конкретного случая.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ Instagram Как вставить группу полей ACF в записи после 1-го абзаца в WordPress? 0 ответов