¿Cómo cambio una posición de fondo con animación css3?

Question

Digamos que tengo un elemento div, con un fondo de position: 0%; cómo iba a cambiar la posición a, por ejemplo position: 100%; pero con fotogramas clave en vuelo estacionario

Me parece que no puede utilizar adecuadamente los fotogramas clave, nunca funciona y tengo todo los últimos navegadores

Gracias.

Answer 1

Si solo desea animar la posición de fondo al desplazarse, es mucho más fácil usar una transición en lugar de animaciones de fotogramas clave. Vea este violín para un ejemplo: http://jsfiddle.net/hfXSs/

Si desea hacer el esfuerzo extra de convertirlo en una animación, tendrá que establecer el estado de animación-reproducción en el div en 'pausado' y cambiarlo a ' corriendo 'en vuelo estacionario. Ver la especificación de una pausa animaciones aquí: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

EDIT: me aburría por lo que aquí es lo mismo usando animaciones de fotogramas clave: http://jsfiddle.net/wGRg5/

Obviamente, el violín tiene el problema de que cuando no se ciernen sobre el div del pausas de animación que probablemente no sean el efecto deseado.

Answer 2

Some Code, parece webkit solo en este momento.

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

Vía: http://jsfiddle.net/hfXSs/

Más aquí: http://css-tricks.com/parallax-background-css3/