Как реализовать CSS JAVASCRIPT связанную анимация stop onhover?

на сайте m108.ru пробую сделать следующую задачу в разных углах экрана по очереди появляются блоки. Зрительно все кроме наведения реализовано так как и задумано. НО не могу разобраться с правильным остановкой и продолжением

УСЛОВИЯ

  1. внутри блока может быть различное количество слов, которые перемещаются бегущей строкой снизу вверх
  2. скорость перемещения должна быть одинаковой(при моем неумелом использовании css блок в зависимости от высоты имел разную скорость),
  3. при наведении на слово должна останавливаться анимация бегущей строки и соответственно блок не должен исчезать. при продолжении анимации бегущей строки анимация исчезновения и появления блоков возобновляется
  4. ширина блока по длинне самого длинного словосочетания (не переносить на следующую строку)
  5. когда слова заканчиваются блок должен сворачиваться и исчезать
  6. в идеале при наведении остановке слова возможность скролить блок слов и при потере hover воспроизводить анимацию с этого места.

Сейчас проблема в том что намудрила с javascript и анимация блоков идет с задержкой отдельно анимация бегущей строки отдельно и после наведения все сбивается скорость слов меняется и блоки исчезают появляются не тогда когда нужно


Ответы (0 шт):