なぜクリックでキーフレームアニメーションがトリガされるのですか？ - javascript、jquery、css、css-animations

以下は私のコードです。キーフレームアニメーションは最初のクリックでのみ発生します。何か案は？

解決しました。以下の私の答えを参照してください

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

---

回答№2の場合は0

このように.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",

});
});
});

---