Чтобы отключить анимацию при загрузке или обновлении страницы, вы можете управлять процессом анимации с помощью JavaScript, а именно, отключить её до завершения загрузки страницы или до какого-то пользовательского взаимодействия, например, клика.
Вот несколько шагов, которые вам помогут отключить анимацию при загрузке страницы:
1. **Используйте JavaScript, чтобы запретить анимацию до загрузки страницы**
Создайте JavaScript функцию, которая будет добавлять класс к элементам только после того, как страница полностью загружена. Например, убедитесь, что анимация не запускается автоматически, только добавляя класс, ответственный за анимацию, после события `window.onload` или `DOMContentLoaded`.
```javascript
document.addEventListener('DOMContentLoaded', (event) => {
// Добавьте класс, который активирует анимацию, только после загрузки содержимого
document.querySelector('.your-element').classList.add('your-animation-class');
});
```
Убедитесь, что до срабатывания события `DOMContentLoaded`, соответствующие стили CSS не запускают анимацию по умолчанию.
2. **Уберите анимацию из CSS**
Если анимация запускается автоматически благодаря CSS свойствам, удалите эти свойства или классы, запускающие анимацию, из элементов до тех пор, пока не напишите JavaScript код, который их добавит в нужный момент.
Если у вас есть CSS класс, который выглядит так:
```css
.animate-me {
animation: my-animation 2s infinite;
}
```
Удалите класс `.animate-me` из вашего HTML:
```html
<!-- Убрать класс анимации -->
<div class="your-element"></div>
```
3. **Используйте CSS Media Query, чтобы отключить анимацию для пользователей, которые предпочитают отказаться от моушен-эффектов**
Существуют пользователи, которые предпочитают минимизировать количество анимаций на странице из-за личных предпочтений или проблем со здоровьем, например, из-за головокружений. Вы можете использовать медиа-запрос `prefers-reduced-motion`, чтобы отключить анимации для этих пользователей:
```css
@media (prefers-reduced-motion: reduce) {
.your-animation-class {
animation: none;
}
}
```
4. **Отладка на CodePen**
Если вы работаете с примером на CodePen и хотите изменить его поведение:
- Откройте ваш Pen.
- Найдите в HTML разметке элементы, на которые сразу же применяется анимационный класс, и уберите эти классы.
- В секции CSS удалите или изменяйте правила, которые вызывают нежелательную анимацию.
- В секции JS добавьте код, который по команде запускает анимацию, например, после события `DOMContentLoaded`.
Вышеприведённые шаги должны помочь вам управлять анимациями на странице и отключить нежелательные эффекты при загрузке или обновлении страницы.