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

Question

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

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

Спасибо.

Answer 1

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

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

РЕДАКТИРОВАТЬ: Мне было скучно, так что вот то же самое, используя анимации ключевых кадров: http://jsfiddle.net/wGRg5/

Очевидно, что у скрипки есть проблема в том, что когда вы не наводите курсор мыши на элемент div, анимация останавливается, что, вероятно, не является желаемым эффектом.

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;
}

Через: http://jsfiddle.net/hfXSs/

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