Как исправить анимацию у элемента с transform: translate?

Question

[Dubrovin]

Есть вот такой кейфрейм:

@keyframes kfadeInUp {
	0% {
		overflow: hidden;
		opacity: 0;
		transform: translate(0, 100px);
	}

	99% {
		opacity: 1;
		transform: translate(0, 0);
	}

	100% {
	}
}

Который отлично работает на элементах без свойства transform. Однако, если у какого-либо элемента есть свойство transform (например, для центрирования), то кейфрейм не учитывает это центрирование (перебивает свойство transform на период анимации). Как это учесть и исправить?

Answer 1

[Костя Фокин]

poniyur правильно все написал, первоначальное значение свойства transform перезаписывается.

Предложу еще вариант: создать обертку с утилитарным классом, которая будет отвечать только за данную анимацию.
При таком подходе мы получаем предсказуемое поведение (обертка всегда будет работать одинаково) и возможность безболезненного переиспользовария (обертка не будет ломать существующие стили элемента). По сути мы отделяем компонент от анимации.

Например, так

<div class="k-fadeInUp">
  <div class="centered-block"></div>
</div>