Vextor-ltd
@Vextor-ltd
Webdeveloper

CSS-анимациция. Как сделать приближение текстового блока одновременно с его перемещением по оси Y строго по центру?

Делаю во так, и вроде бы всё правильно, однако анимация тайтла происходит с небольшим смещением вправо. В чём тут косяк?

https://codepen.io/vlad-tarasoffka/full/poNZzbj

title {
	position: absolute;	
	font-size: 1rem;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	transform: translateY(-50%);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);				
	animation: title-move 20s ease-out infinite;
}
@keyframes title-move {
	0% {
		transform:  scale(1) translateY(-450%);
	}
	50% {
		transform:  scale(3) translateY(180%);
	}
	100% {
		transform:  scale(1) translateY(-450%);
	}
}
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы