Come cambio una posizione di sfondo con l'animazione css3?

Question

Diciamo che ho un elemento div, con un background in position: 0%; come vorrei cambiare la posizione, ad esempio, position: 100%; ma con i fotogrammi chiave su hover

io non riesco a usare i fotogrammi chiave correttamente, non funziona mai e ho tutto gli ultimi browser.

Grazie.

Answer 1

Se si desidera animare la posizione dello sfondo al passaggio del mouse, è molto più semplice utilizzare una transizione anziché le animazioni dei fotogrammi chiave. Guarda questo violino per un esempio: http://jsfiddle.net/hfXSs/

Se vuoi fare uno sforzo extra per renderlo un'animazione devi impostare lo stato di animazione-gioco sul div su 'messo in pausa' e cambiarlo in ' in esecuzione 'su hover. Vedere le specifiche sulla fermandosi animazioni qui: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: mi annoiavo Quindi, ecco la stessa cosa usando le animazioni dei fotogrammi chiave: http://jsfiddle.net/wGRg5/

Ovviamente, il violino ha il problema che quando non si passa il mouse sopra il div del pause di animazione che probabilmente non sono l'effetto desiderato.

Answer 2

Alcuni codici, al momento si presenta come 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/

Maggiori informazioni qui: http://css-tricks.com/parallax-background-css3/