Как изменить положение фона с помощью анимации css3?

Question

Допустим, у меня есть Div элемент, с фоном в position: 0%; как бы я изменить позицию, например, position: 100%; но с ключевыми кадрами на парении я не могу использовать ключевые кадры правильно

, он никогда не работает, и у меня есть все последние браузеры.

Спасибо.

Answer 1

Если вы просто хотите анимировать фоновое положение при наведении, гораздо проще использовать переход вместо анимации ключевого кадра. См. Эту скрипку в качестве примера: http://jsfiddle.net/hfXSs/

Если вы хотите приложить дополнительные усилия для создания анимации, вам нужно будет установить состояние анимации в div на «приостановлено» и изменить его на «пауза», работает "на зависании. Смотрите спецификацию на паузу анимации здесь: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: Мне было скучно, так вот то же самое, используя ключевые кадры анимации: http://jsfiddle.net/wGRg5/

Очевидно, что скрипку имеет проблему, когда вы не нависают над ДИВ анимационные паузы, которые, вероятно, не являются желаемым эффектом.

Answer 2

Некоторый код, выглядит как webkit только на данный момент времени.

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
} 

Via: http://jsfiddle.net/hfXSs/

Подробнее здесь: http://css-tricks.com/parallax-background-css3/