title: Animate pulsing effect using CSS3 Transform Scale and jQuery
body: <p>I'm attempting to create a pulsing animation of an element using CSS3's <code>transform: scale(x,y)</code>. I want the object to endlessly pulse (becoming slightly larger) unless it's hovered over - at which point the current animation should finish (i.e. return to its original size) and cease pulsing until it's no longer being hovered over. I can't even seem to get jQuery's <code>.animate()</code> to work, however.</p>
  
  <pre><code>function pulse() {
    $('#pulsate').animate({
      transition: 'all 1s ease-in-out',
      transform:  'scale(1.05,1.05)'
    }, 1500, function() {
      $('#pulsate').animate({
        transition: 'all 1s ease-in-out',
        transform:  'scale(1,1)'
        }, 1500, function() {
          pulse();
      });
    });
  }
  pulse();
  </code></pre>
  
  <p>Would using <code>.addClass</code> and <code>.removeClass</code> be better here?  <code>.removeClass</code> would do the trick for stopping the animation on <code>.hover()</code>, but I'm unsure on implementation overall.</p>