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

Pos: 1

Val: 302

Ha mantenido su posición en JQuery (en relación al último mes)

Reiniciar una animación de CSS3

JQuery

Publicado el 6 de Abril del 2016 por Xve (294 códigos)

2.843 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 2016

2.844 visualizaciones desde el 6 de Abril del 2016

<!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

http://lwp-l.com/s3498

Visualizador de imagenes para móvil

Enviar desde jquery parámetros por POST

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

Versión 1.0

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

Comentar la versión: Versión 1.0

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.