texto - keyframes css3 ejemplos

Reproducir animación CSS al pasar el mouse, pausa al pasar el mouse

Question

Estoy tratando de

• PLAY animación 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 padre div?

Vea un ejemplo aquí , cuando se desplaza hacia afuera, vuelve al cuadro 0.

No quiero usar JS.

Answer 1

ejemplo jsfiddle

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

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

luego cambia el estado de juego a correr en vuelo estacionario

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

Answer 2

Consulte 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 especificación W3C , 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 al background las propiedades y background-color .

Entonces en el código original:

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

La propiedad animation-play-state está configurada para paused . Sin embargo, la última animation propiedad OVERWRESE este valor por su valor predeterminado en 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 simplemente puede usar ( http://jsfiddle.net/fRzwS/374/ ):

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

Aquí hay otro ejemplo que funciona tanto en Chrome como en 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. Mira:

#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 animation-play-state anula el animation-play-state . Necesita reordenar estas cadenas para que funcione

Answer 4

Estaba buscando esto también, y la respuesta de @MikeM me llevó a donde tenía que ir, y con el comentario de @HellGate sobre esa respuesta con respecto a Chrome:

necesitas el estado de pausa después de la animación, de lo contrario no funciona

Estaba interesado en cómo pausar la animación en una hoja de sprite PNG cuando estaba inactiva, y continuar / reanudar al pasar el mouse sobre la página, por lo que la respuesta aceptada me ayudó en ese sentido.

Aquí hay una demostración que muestra cómo se puede hacer esto en una Hoja de Sprite de PNG (créditos para el sprite, y CSS original para Guil Hernández y su impresionante publicación de blog aquí ): 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; }
}