Почему кубик сдвигается вправо, хотя должен идти ровно по вертикали?

Question

[Роман Тузов]

Вот code pen: https://codepen.io/HutsonR/pen/YzPybyb

Comments

[Rustam Bainazarov]

Вот так надо keyframe:

@keyframes up {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(2rem) translateX(-50%);
	}
}

[Роман Тузов]

Рустам Байназаров, Спасибо!

[Роман Тузов]

Рустам Байназаров, И, я думаю, лучше всё же сократить вот так: transform: translate(-50%, 2rem);

[Rustam Bainazarov]

Hutson, да, пожалуйста, почему бы нет.

Answer 1

[Ольга Ветер]

transform в анимации переопределяет transform в начальных стилях элемента

Answer 2

[Pavstyuk]

cube {
    width: 50px;
    height: 50px;
    background: #111;
    position: absolute;
    bottom: 14%;
    left: calc( 50% - 25px );
    animation: up 2s infinite;
}

@keyframes up {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(2rem);
	}
}

Вот так будет ожидаемый результат.