Блог

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

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

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

исходный код : www.yagraph.org/images/panoramic/sources-pano.zip

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

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

Похоже, что режим анимационного заполнения: forwards; не работает, и не запускает анимационное состояние воспроизведения: приостановлено в исходном состоянии. Я полагаю, это вызвано тем фактом, что я запускаю анимацию из другого элемента DOM, отличного от анимированного…

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

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

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

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

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

Пример CSS:

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