Задать вопрос
@abyssrip
css

При добавлении анимации scale появился ползунок. Как от него избавиться?

Доброго времени суток.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <h2 class="header" style="font-family: sans-serif;">Заголовок</h2>
</body>
</html>

@-webkit-keyframes scale {
			0% {transform: scale(1);}
			50%{transform: scale(1.1);}
			100%{transform: scale(1.2);}
		}
		@-o-keyframes scale {
			0% {transform: scale(1);}
			50%{transform: scale(1.1);}
			100%{transform: scale(1.2);}
		}
		@-moz-keyframes scale {
			0% {transform: scale(1);}
			50%{transform: scale(1.1);}
			100%{transform: scale(1.2);}
		}
		@keyframes scale {
			0% {transform: scale(1);}
			50%{transform: scale(1.1);}
			100%{transform: scale(1.2);}
		}
		.header{
			animation: scale 2s linear alternate infinite;
		}

При такой анимации у меня появился ползунок снизу, который при движении мыши растягивается в течении двух секунд и обратно, словно тоже анимированнный, но сама страница при этом остается статичной.
  • Вопрос задан
  • 71 просмотр
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
@abyssrip Автор вопроса
Нашел как исправить.
Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow: hidden.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Придумать альтернативный логотип к уже существующему
23 дек. 2024, в 07:27
1000 руб./за проект
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Ещё заказы