Задать вопрос
Vextor-ltd
@Vextor-ltd
Webdeveloper

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

Задача чтобы машина при скролле ехала вперёд.
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);

Работает что-то одно. Вместе никак.
Как добиться желаемого результата?
  • Вопрос задан
  • 129 просмотров
Подписаться 1 Простой 2 комментария
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Пишите анимации через запятую.
Либо анимируйте разные обертки.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
18 дек. 2024, в 11:03
5000 руб./за проект
18 дек. 2024, в 10:44
130000 руб./за проект
18 дек. 2024, в 10:02
7000 руб./за проект