Código de JQuery - Reiniciar una animación de CSS3

Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Reiniciar una animación de CSS3gráfica de visualizaciones


JQuery

Publicado el 6 de Abril del 2016 por Xve (278 códigos)
2.019 visualizaciones desde el 6 de Abril del 2016
Este simple código muestra como reiniciar una animación de CSS3 una vez ya ha sido ejecutada.

La manera de hacerlo, es eliminando el estilo que genera dicha animación, y volver a ponerla pasados 10 milisegundos.

Versión 1.0

Publicado el 6 de Abril del 2016gráfica de visualizaciones de la versión: Versión 1.0
2.020 visualizaciones desde el 6 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	$(document).ready(function(){
		$("input[type=button]").click(function(){
			// eliminamos el estilo
			$("div").removeClass("anima");
 
			// añadimos nuevamente el estilo despues de 10 milisegundos
			setTimeout(function() {
				$('div').addClass('anima');
			},10);
		});
	});
	</script>
 
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color:red;
	}
	.anima {
		background-color: red;
		animation-name: example;
		animation-duration: 1s;
 
		animation-fill-mode: forwards;
	}
 
	/* Chrome, Safari, Opera */
	/* Standard syntax */
	@keyframes example {
		from {background-color: red;}
		to {background-color: yellow;}
	}
	</style>
	</head>
<body>
 
<p>
	<input type="button" value="Pulsa para reiniciar la animación">
</p>
 
<div></div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3498