changing css3 animation iteration count from infinite does nothing

I have a css3 animation running with the iteration count set to infinite.

based on a click event I want to stop the an开发者_开发问答imation but changing the iteration count does nothing. can anyone suggest a better solution?

Thanks

Ian

Put your animation in a class sepeared from the styling, i.e.

.box {
  height: 100px;
  width: 100px;
  background-color: #000;
}

.box.animated {
  -webkit-animation... 
}

and then remove class animated on click.