Сохранять положение анимации относительно фона при изменении размера ⇐ Html

[Гость]

Мне интересно, как сохранить положение элементов относительно фонового изображения cover.

Очень минимальный пример: скажем, у меня есть кошка в качестве фонового изображения, и я пытаюсь анимировать движение мяча между ее двумя глазами. Как я могу настроить CSS/запись JavaScript, чтобы сделать мое анимированное изображение устойчивым к изменению размера окна?

Очень грубый пример ниже в виде jsfiddle:




#background { объектное соответствие: обложка; ширина: 100vw; высота: 100вх; положение: фиксированное; верх: 0; слева: 0; } @keyframes йойо { от { верх: 20 пикселей; слева: 500 пикселей; } к { верх: 40 пикселей; слева: 650 пикселей; } } #мяч { положение: фиксированное; ширина: 30 пикселей; имя-анимации: йойо; продолжительность анимации: 2 с; количество итераций анимации: бесконечно; направление анимации: альтернативное; }