Shrink/Grow animation using jQuery/CSS

2019-07-28 17:44发布

问题:

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.

回答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.