Shrink/Grow animation using jQuery/CSS

Question

How can a grow/shrink animation be done with jQuery and/or CSS? An example that I can think of is this when you click on the Join Now button.

I looked into animate.css but they did not offer such an animation.

Answer 1

DEMO — Solution using CSS3's transition-duration ( W3Schools ) and transform:scale(X,Y); ( W3Schools ).

Update:

DEMO — Going a step further, doing more than just changing to opacity:0; by adding display:none; (via jQuery .hide() ) at the end of the animation.