Приостановить анимацию, выходя из состояния: hover

Question

В настоящее время я экспериментирую с анимацией CSS3 и пытаюсь создать панорамный вид только с CSS (без JavaScript).

Пока я получаю демо-версию своего рода: http://www.yagraph.org/images/panoramic/

Идея проста: если пользователь наводит черный прямоугольник на границах, центральный фон перемещается.

исходный код: www.yagraph.org / изображения / панорамная / sources-pano.zip

Но мне не удается закончить, потому что, когда мышь покидает состояние: hover, фон сбрасывается в исходное положение. Я могу поместить переход в исходное состояние, чтобы сгладить это, но я хочу добиться приостановки анимации в ее вычисленном (или визуальном) состоянии, когда мышь уходит, или, если вы предпочитаете, не сбрасывать ее в его начальное состояние.

Я пишу здесь сейчас, потому что после целого дня бездельничания я даже не могу сделать вывод, действительно ли это выполнимо с помощью анимации CSS3 ...!

Режим анимации-заполнения: вперед; не похоже на работу, ни запуск анимации-воспроизведения-состояния: приостановлено в начальном состоянии. Я полагаю, это связано с тем, что я запускаю анимацию с другого элемента DOM, а не с анимированного ...

Можете ли вы помочь мне или уверить меня, что это тщетная попытка?

Заранее большое спасибо

Answer 1

Приостановка анимации css3

Пример CSS:

button:hover .icon{
    -webkit-animation-play-state:paused; /* Webkit Browsers */
    -moz-animation-play-state:paused; /* Firefox*/
     animation-play-state:paused;
}

Answer 2

Я просмотрел Спецификацию переходов CSS3 , и нет упоминаний об остановке переходов на полпути. Говорят о симметрично обращающихся переходах, но когда я попробовал это недавно, он был плохо реализован. Так что, боюсь, тебе придется вернуться к JavaScript.

Я думаю, что в любом случае это менее стилистично и более функционально, поэтому, вероятно, лучше подходит для JavaScript IMO.