Juego CSS animación en vuelo estacionario, haga una pausa en vuelo estacionario sin

Question

Estoy intentando

• animación PLAY en vuelo estacionario.
• Animación PAUSE al pasar el cursor (es decir, no volver al cuadro 0).

¿No es posible usar -webkit-animation-play-state: paused; en un div principal?

ve un example here, cuando se pasa hacia fuera que se remonta a 0. marco

no quiero usar JS.

Answer 1

example jsfiddle

establezca la animación en #tech con estado de reproducción en pausa

#tech { 
    -webkit-animation-play-state:paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

a continuación, cambiar el juego por el estado para que se ejecuta en vuelo estacionario

#tech:hover{ 
    -webkit-animation-play-state:running; 
} 

Answer 2

Compruebe el jsFiddle aquí: http://jsfiddle.net/fRzwS/373/.

La animación no se detiene porque la última definición de animation sobrescribe el valor de la propiedad animation-play-state. De acuerdo con la W3C specification, animation:

The 'animation' shorthand property is a comma-separated list of 
    animation definitions, each of which combines seven of 
    the animation properties into a single component value. 

Y las siete propiedades son:

<single-animation> = <single-animation-name> || <time> 
    || <single-animation-timing-function> 
    || <time> || <single-animation-iteration-count> || <single-animation-direction> 
    || <single-animation-fill-mode> || <single-animation-play-state> 

Es similar a las propiedades y backgroundbackground-color.

Así que en el código original:

#tech { 
    -webkit-animation-play-state: paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

Propiedad animation-play-state está dispuesto a ser paused. Sin embargo, la propiedad tardía animation OVERWRITES este valor por su valor predeterminado running. Por lo tanto, puede definir la propiedad animation-play-state más tarde (http://jsfiddle.net/fRzwS/373/):

#tech { 
    -webkit-animation: moveSlideshow 10s linear infinite; 
    -webkit-animation-play-state:paused; 
} 

O puede simplemente usar (http://jsfiddle.net/fRzwS/374/):

-webkit-animation: moveSlideshow 10s linear infinite paused; 

---

Aquí es otro ejemplo, que funciona tanto en Chrome y Firefox: http://jsfiddle.net/MaY5A/694/

Answer 3

No tengo suficiente reputación para comentar otras respuestas. Bien. La forma de @MikeM funciona, pero cometió un pequeño error. Mire:

#tech { 
    -webkit-animation-play-state:paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

Esto no funciona y esto no debería funcionar. La nota abreviada de animación anula animation-play-state.Es necesario cambiar el orden de estas cadenas para que funcione

Answer 4

que estaba buscando para esto también, y @MikeM 'respuesta s me tienes donde tenía que ir, y con @HellGate' s comentario sobre esa respuesta en relación con Chrome:

que necesita el estado de pausa después de la animación de lo contrario no funciona

que estaba interesado en cómo hacer una pausa en la animación en una hoja de sprites PNG cuando estaba inactiva, y continuar/curriculum vitae en vuelo estacionario, por lo que la respuesta aceptada ayudado en ese sentido.

Aquí es una demo que muestra cómo se puede hacer esto en una hoja PNG Sprite (créditos para el sprite, y CSS originales van a Guil Hernández y su impresionante entrada de blog here): CodePen.

Las partes importantes de CSS:

.monster { 
    width: 190px; 
    height: 240px; 
    margin: 2% auto; 
    background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; 
    -webkit-animation: monsterAnimation .8s steps(10) infinite; 
    animation: monsterAnimation .8s steps(10) infinite; 
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ 
    animation-play-state: paused; 
} 

.monster:hover { 
    -webkit-animation-play-state: running; 
    animation-play-state: running; 
} 

@keyframes monsterAnimation { 
    100% { background-position: -1900px; } 
}