Animate pulsing effect using CSS3 Transform Scale and jQuery

Question

I'm attempting to create a pulsing animation of an element using CSS3's transform: scale(x,y). 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 .animate() to work, however.

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

Would using .addClass and .removeClass be better here? .removeClass would do the trick for stopping the animation on .hover(), but I'm unsure on implementation overall.

Answer 1

Try using CSS animations.

@keyframes pulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.1, 1.1);
    }

    100% {
    transform: scale(1, 1);
    }
}

#test {
    animation: pulse 1s linear infinite;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1, 1);
    }
    50% {
        -webkit-transform: scale(1.1, 1.1);
    }
    100% {
        -webkit-transform: scale(1, 1);
    };
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1, 1);
    };
}

#test {
    background: red;
    width: 20px;
    height: 20px;
    -webkit-animation: pulse 1s linear infinite;
    animation: pulse 1s linear infinite;
}
#test:hover {
    -webkit-animation: none;
    animation:none;
}

<div id="test"></div>

http://jsfiddle.net/rooseve/g4zC7/2/