title: How to make a CSS3 animation reusable?
body: <p>Without JQuery.</p>
  
  <p>I have the following code but it will only work on one click. It will not be able to be used twice:</p>
  
  <pre><code>@-moz-keyframes lulse {
      0%{
          -moz-transform:scale(1);
      }
      20%{
          -moz-transform:scale(1.5);
      }
      100% {
          -moz-transform:scale(1);
      }
  }
  
  .pinto {
      -moz-animation-name: lulse;
      -moz-animation-duration: .2s;
      -moz-animation-iteration-count: 1;
      -moz-animation-timing-function: linear;
      -moz-animation-direction: normal;
  }
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>onclick="changeClass(this.id);
  
  function changeClass(a)
  {
      document.getElementById(a).className += "pinto";
  
  }
  </code></pre>