Ejecutar una clase de animación de css desde jquery

[agui90]

Buenas tardes, escribo en esta oportunidad porque tengo una clase en css que hace una animación a un icono, como podría hacer para que al hacer click pueda ejecutar otra vez esa clase que contiene esa animación? se puede hacer eso?, estuve intentando de esta manera pero me elimina la clase y si le doy otra vez click es que funciona pero le vuelvo a dar deja de funciona, que me recomiendan?

Código:

$("#mostrar-animacion").on('click',function(){
		$(".icono").toggleClass('icon-animated-bell');
	});

[Alexis88]

Tan solo bastaría con remover y añadir la clase.

Código Javascript:

$(".icono").removeClass("icon-animated-bell").addClass("icon-animated-bell");
 

También existe la propiedad animationPlayState para controlar la ejecución y pausa del efecto.

[agui90]

Gracias por responderme, intente probar el ejemplo que me colocaste pero no me funciona, con la propiedad animationPlayState como podría funcionar?

Iniciado por Alexis88

Tan solo bastaría con remover y añadir la clase.

Código Javascript:

$(".icono").removeClass("icon-animated-bell").addClass("icon-animated-bell");
 

También existe la propiedad animationPlayState para controlar la ejecución y pausa del efecto.

[Alexis88]

Me parece extraño que no te haya servido el cambio de clase. De cualquier forma, aún tienes la opción del atributo animationPlayState.

Código Javascript:

$(".icono").on("click", function(){
    var estado = $(this).css("animationPlayState"),
        ACTIVO = "running", PAUSADO = "paused";
  
    if (estado == ACTIVO){
        $(this).css("animationPlayState", PAUSADO);
    }
    else{
        $(this).css("animationPlayState", ACTIVO);
    }
});