Why does keyframes animation on click only trigger once?

Question

Below is my code, the keyframes animation only happens on first click. Any ideas?

Solved, see my answer below

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

This is very relevant but I visited both reference links and couldn't find a solution that worked: run keyframes-animation on click more than once

Any help would be greatly appreciated.

Thanks. Thomas.

Mark your own answer as the correct one if it is solved, there is no need to mention it in title — Huangism, Dec 15 '14 at 18:29

score 1 · Accepted Answer · answered Dec 15 '14 at 18:25

I found a solution:

I added a listener to give the element a new / resetting animation at the end

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

Mohamed-Yousef · Answer 2 · 2014-12-15T18:19:26.047

use .on() or .live() like this

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

or like this

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

so your code will be

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

       });
   });
});

Thanks for this, I tried it be unfortunately it didn't work. I have since found a solution, will post here shortly. — user1951962, Dec 15 '14 at 18:19

Why does keyframes animation on click only trigger once?

2 Answers2