Jak zmienić pozycję tła przy animacji css3?

Question

Powiedzmy Mam elementu div, z tłem w position: 0%; jak bym zmienił stanowisko, np position: 100%; ale z klatkami kluczowymi przy aktywowaniu

I nie wydają się prawidłowo używać klatek kluczowych, to nigdy nie działa i mam wszystko najnowsze przeglądarki.

Dzięki.

Answer 1

Jeśli chcesz tylko animować pozycję tła po najechaniu kursorem, znacznie łatwiej jest użyć przejścia zamiast animacji klatki kluczowej. Zobacz ten skrzypce na przykład: http://jsfiddle.net/hfXSs/

Jeśli chcesz włożyć dodatkowy wysiłek w uczynienie z niego animacji, musisz ustawić stan animacji-odtwarzania na div na "wstrzymany" i zmienić na " uruchomiony "na zawisie. Zobacz specyfikację na zatrzymując animacje tutaj: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: Byłem znudzony więc o to samo za pomocą klatek kluczowych animacji: http://jsfiddle.net/wGRg5/

Oczywiście, skrzypce ma wątpliwości, że jeśli nie są unoszące się nad div animacja zatrzymuje się, co prawdopodobnie nie jest pożądanym efektem.

Answer 2

Niektóre kody wyglądają teraz tylko na 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/

Więcej tutaj: http://css-tricks.com/parallax-background-css3/