Loop a CSS Animation
Praveen's solution should be closer to what you asked for, but I'll provide a solution using CSS3 animations instead of using jQuery to animate transitions. IMO it is easier to maintain and understand:
CSS
@-webkit-keyframes foo {
from {
-webkit-transform:scale(1);
}
to {
-webkit-transform:scale(2);
}
}
Then JS:
$("#msg").click(function() {
var duration = 1400;
$msg = $(this);
//syntax is: animation-name animation-duration[ animation-timing-function][ animation-delay][ animation-iteration-count][ animation-direction]
$msg.css("animation", "foo " + duration + "ms ease infinite alternate");
});
Fiddle
I didn't use the optional animation-delay
parameter in the above, the rest should be pretty straightforward. infinite
iteration count with alternate
direction will execute the animation indefinitely alternating the animation direction from (from
to to
) to (to
to from
) until you call $msg.css("animation", "")
to remove the animation.
ps. jQuery 1.8+ will do the prefixing in the JS automatically for you.
Of course, you still have to prefix the CSS to work in non-webkit browsers though. Prefixr should do it.
Fiddle with prefixed CSS.