Por que a animação de quadros-chave em clique é acionada apenas uma vez? - javascript, jquery, css, css-animações

Abaixo está o meu código, a animação dos quadros-chave só acontece no primeiro clique. Alguma ideia?

Resolvido, veja minha resposta abaixo

JQUERY:

$(".audioplayer-playpause").click(function(){
$(".audioplayer-playpause").css({

//for firefox
"-moz-animation-name":"playPausePulse",
"-moz-animation-duration":"0.1s",
"-moz-animation-iteration-count":"1",
"-moz-animation-fill-mode":"forwards",

//for safari & chrome
"-webkit-animation-name":"playPausePulse",
"-webkit-animation-duration":"0.1s",
"-webkit-animation-iteration-count":"1",
"-webkit-animation-fill-mode":"forwards",

});
});

CSS:

@-moz-keyframes playPausePulse /*--for webkit--*/{
0%   {background-color: rgba(0, 0, 0, 0.05);}
50%   {background-color: rgba(0, 0, 0, 0.1);}
100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-webkit-keyframes playPausePulse /*--for webkit--*/{
0%   {background-color: rgba(0, 0, 0, 0.05);}
50%   {background-color: rgba(0, 0, 0, 0.1);}
100%   {background-color: rgba(0, 0, 0, 0.05);}
}

Isso é muito relevante, mas visitei os links de referência e não consegui encontrar uma solução que funcionasse: execute quadros-chave de animação ao clicar mais de uma vez

Qualquer ajuda seria muito apreciada.

Obrigado. Thomas.

Respostas:

1 para resposta № 1

Eu encontrei uma solução:

Adicionei um ouvinte para dar ao elemento uma nova animação / redefinição no final

JQUERY

$(".audioplayer-playpause").click(function(){
$(".audioplayer-playpause").css({

//for firefox
"-moz-animation-name":"playPausePulse",
"-moz-animation-duration":"0.1s",
"-moz-animation-iteration-count":"1",
"-moz-animation-fill-mode":"forwards",

//for safari & chrome
"-webkit-animation-name":"playPausePulse",
"-webkit-animation-duration":"0.1s",
"-webkit-animation-iteration-count":"1",
"-webkit-animation-fill-mode":"forwards",

});
});

$(".audioplayer-playpause").bind("oanimationend animationend webkitAnimationEnd", function() {
$(".audioplayer-playpause").css({
"-moz-animation-name": "playPausePulseReset",
"-webkit-animation-name": "playPausePulseReset",
});
});

CSS

@-moz-keyframes playPausePulse /*--for webkit--*/{
0%   {background-color: rgba(0, 0, 0, 0.05);}
50%   {background-color: rgba(0, 0, 0, 0.1);}
100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-webkit-keyframes playPausePulse /*--for webkit--*/{
0%   {background-color: rgba(0, 0, 0, 0.05);}
50%   {background-color: rgba(0, 0, 0, 0.1);}
100%   {background-color: rgba(0, 0, 0, 0.05);}
}

@-moz-keyframes playPausePulseReset /*--for webkit--*/{
0%, 100% {
background-color: rgba(0, 0, 0, 0.05);
}
}

@-webkit-keyframes playPausePulseReset /*--for webkit--*/{
0%, 100% {
background-color: rgba(0, 0, 0, 0.05);
}
}

---

0 para resposta № 2

use .on () ou .live () como este

$(".audioplayer-playpause").on("click",function(){});

ou assim

 $(document).on("click",".audioplayer-playpause",function(){});

então seu código será

$(document).ready(function(){
$(".audioplayer-playpause").on("click",function(){
$(this).css({

//for firefox
"-moz-animation-name":"playPausePulse",
"-moz-animation-duration":"0.1s",
"-moz-animation-iteration-count":"1",
"-moz-animation-fill-mode":"forwards",

//for safari & chrome
"-webkit-animation-name":"playPausePulse",
"-webkit-animation-duration":"0.1s",
"-webkit-animation-iteration-count":"1",
"-webkit-animation-fill-mode":"forwards",

});
});
});

---