Supprimer animation

Bonjour la communauté, je viens vous voir car je galère un peu avec les animations css.
J'ai un lecteur audio très simple sur une page , avec simplement une visualisation audio.
(cf : pour le moment c'est le loader créer via le tuto de grafikart avec les bars qui up/down et fade in/out)

En gros la musique se joue : l'animation est présente, mais lorsque je click sur le bouton mute, je voudrai que l'animation s'arrête et inversement.
Voici mon code :

<div id="audio-control">
    <span id="mute" class="mute loader loader-bars"><span></span></span>
</div>

.loader-bars:before, .loader-bars:after,
.loader-bars span {
  content: '';
  display: block;
  position: absolute;
  left: 0px;
  top: 0;
  width: 3px;
  height: 20px;
  background-color: #FFF;
  -webkit-animation: grow 1s linear infinite;
  -moz-animation: grow 1s linear infinite;
  animation: grow 1s linear infinite; }
.loader-bars:after {
  left: 5px;
  -webkit-animation-delay: -0.66s;
  -moz-animation-delay: -0.66s;
  animation-delay: -0.66s; }
.loader-bars span {
  left: 10px;
  -webkit-animation-delay: -0.33s;
  -moz-animation-delay: -0.33s;
  animation-delay: -0.33s; }

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scaleY(0);
    opacity: 0; }

  50% {
    -webkit-transform: scaleY(1);
    opacity: 1; }

  100% {
    -webkit-transform: scaleY(0);
    opacity: 0; } }

Et coté JS :

var mute = $("#mute");
var audio = new Audio('intro.mp3');
audio.autoplay=true;
mute.click(function(){
if(audio.muted == false)
    {
        audio.muted=true;
    }
    else if(audio.muted == true)
    {
        audio.muted=false;
    }
});

Comment dire lorsque audio.muted=true au js d'enlever l'animation ? J'ai essayé avec une classe clear-anim (animation:none) etc, même avec la methode removePropirety('animation') mais rien n'y fait ...

Auriez vous une idée ?