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

Imágen de perfil

Reiniciar una animación de CSS3gráfica de visualizaciones


JQuery

Publicado el 06 de Abril del 2016 por xve
745 visualizaciones desde el 06 de Abril del 2016. Una media de 21 por semana
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

Actualizado el 08 de Abril del 2016 (Creado el 06 de Abril del 2016)gráfica de visualizaciones de la versión: Versión 1.0
746 visualizaciones desde el 06 de Abril del 2016. Una media de 28 por semana
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

http://lwp-l.com/s3498