Чому анімація ключових кадрів при натисканні лише спрацьовує один раз? - javascript, jquery, css, css-анімації

Нижче мій код, анімація ключових кадрів відбувається лише при першому натисканні. Будь-які ідеї?

Вирішено, дивіться мою відповідь нижче

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);}
}

Це дуже актуально, але я відвідав як посилання, так і не знайшов рішення, яке спрацювало: запускати анімацію ключових кадрів при натисканні не один раз

Будь-яка допомога буде вдячна.

Дякую. Томас.

Відповіді:

1 для відповіді № 1

Я знайшов рішення:

Я додав слухача, щоб надати елементу нову / скидання анімації наприкінці

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 для відповіді № 2

використовувати .on () або .live (), як це

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

або як це

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

тож ваш код буде

$(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",

});
});
});

---