 |
Animaciones (animation-play-state)
La propiedad animation-play-state especifica si la animación se está ejecutando o en pausa.
Nota: Utilice esta propiedad en un JavaScript para pausar una animación en medio de un ciclo.
Opciones
- paused Especifica que la animación está en pausa.
- running Valor por defecto. Especifica que la animación se está ejecutando.
Ejemplos
<html>
<head>
<style>
.op1 {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-play-state: paused;
}
@keyframes mymove {
from {left: 0px;}
to {left: 400px;}
}
.op1:hover {
animation-play-state: running;;
}
</style>
</head>
<body>
<p>La animación comienza pausada , pero si colocamos el mouse sobre el cuadarado rojo se mueve , si lo sacamos se para:</p>
<div class="op1"></div>
<p><strong>Nota:</strong> La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.</p>
</body>
</html>
La animación comienza pausada , pero si colocamos el mouse sobre el cuadarado rojo se mueve , si lo sacamos se para:
Nota: La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.
<html>
<head>
<style>
.op2 {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-play-state: running;
}
@keyframes mymove {
from {left: 0px;}
to {left: 400px;}
}
.op1:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<p>La animación comienza corriendo , pero si colocamos el mouse sobre el cuadarado dorado se para , si lo sacamos se vuelve a funcionar:</p>
<div class="op2"></div>
<p><strong>Nota:</strong> La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.</p>
</body>
</html>
La animación comienza corriendo , pero si colocamos el mouse sobre el cuadarado dorado se para , si lo sacamos se vuelve a funcionar:
Nota: La propiedad animation-play-state property no es soportada en ver Internet Explorer 9 y versiones anteriores.