Animate pulsing effect using CSS3 Transform Scale and jQuery

animation, css, javascript, jquery, transform

Solution

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/

Problem

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.

Original source