Задать вопрос
@proschedelay

Почему не работает анимация при маленьком окне?

Вот строки, только учусь делать, нигде ответа не нашел. При полном окне анимации работают как надо, как только окно уменьшаешь, то "PROSCHE" перестает работать и смещается влево.

<main>
            <div class="name-center">
            <h1 class="text-center">PROSCHE</h1>
            <h2 class="text-undercenter">DELAY</h2>
        </div>
        </main>


main {
	position: relative;
	padding: 0 auto;
	margin: 0 auto;
  }

  .text-center {
	text-align: center;
	font-size: 72px;
	background: linear-gradient(to right, #FFF 20%, rgb(157, 255, 0) 40%, rgb(179, 255, 0) 60%, #FFF 80%);
	background-size: 200% auto;

	color: #000;
	background-clip: text;
	text-fill-color: rgba(128, 128, 128, 0.082);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(128, 128, 128, 0.192);
	
	animation: shine 5s linear infinite; }

	@keyframes shine {
	  to {
		background-position: 200% auto;
	  }
	}
}

  .text-undercenter {
	text-align: center;
	margin-top: 20px;
	background: linear-gradient(to right, #FFF 20%, rgb(0, 195, 255) 40%, rgb(0, 247, 255) 60%, #FFF 80%);
	background-size: 200% auto;
	
	color: #000;
	background-clip: text;
	text-fill-color: rgba(128, 128, 128, 0.158);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(128, 128, 128, 0.192);
	
	animation: shine 5s linear infinite; }

	@keyframes shine {
		to {
		  background-position: 200% center;
		}
	  }
  • Вопрос задан
  • 56 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
У меня в песочнице все отлично работает, надпись PROSCHE анимирована и всегда по центру на всех разрешениях
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы