Как реализовать CSS JAVASCRIPT связанную анимация stop onhover?
на сайте m108.ru пробую сделать следующую задачу в разных углах экрана по очереди появляются блоки. Зрительно все кроме наведения реализовано так как и задумано. НО не могу разобраться с правильным остановкой и продолжением
УСЛОВИЯ
- внутри блока может быть различное количество слов, которые перемещаются бегущей строкой снизу вверх
- скорость перемещения должна быть одинаковой(при моем неумелом использовании css блок в зависимости от высоты имел разную скорость),
- при наведении на слово должна останавливаться анимация бегущей строки и соответственно блок не должен исчезать. при продолжении анимации бегущей строки анимация исчезновения и появления блоков возобновляется
- ширина блока по длинне самого длинного словосочетания (не переносить на следующую строку)
- когда слова заканчиваются блок должен сворачиваться и исчезать
- в идеале при наведении остановке слова возможность скролить блок слов и при потере hover воспроизводить анимацию с этого места.
Сейчас проблема в том что намудрила с javascript и анимация блоков идет с задержкой отдельно анимация бегущей строки отдельно и после наведения все сбивается скорость слов меняется и блоки исчезают появляются не тогда когда нужно