Как совместить css-анимацию с динамическим свойством transform:translateX(), выпоняемым на Javascript по событию scroll?

Question

[Влад]

Задача чтобы машина при скролле ехала вперёд.
translateX() выполняется с помощью JS и пересчитывается в зависимости от позиции scrollTop.

Мне нужно, чтобы машина тряслась (типа двигатель работает).
Я создал анимацию:

car {
  position: absolute;
  ...
  animation: shake 0.01s linear infinite alternate;
}
@keyframes shake {
	0% {
	transform: translateY(0);
	}
	100% {
		transform: translateY(-2px);
	}
}

Однако, получатся, что анимация блокирует динамическое перемещение transform:translateX(speed);

Работает что-то одно. Вместе никак.
Как добиться желаемого результата?

Comments

[Kentavr16]

Перемещай во время движения не только по игреку но и по иксу. Это и будет работа двигателя.

[Влад]

Kentavr16, у них время разное.

Answer 1

[Ankhena]

Пишите анимации через запятую.
Либо анимируйте разные обертки.

Comments

[Влад]

Точно! Тупанул, переработал видимо. Другую обёртку просто сделать ))
Или даже не нужно. Анимашку движения вешаешь на обёртку, а анимашку работы двигателя тупо на тег с изображением.