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.

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.

• javascript
• jquery
• css
• animation
• jquery-animate

• there are a ton of jquery modal plugins available. A little google search will likely turn up "The 30 best modals" or similar. Also known as dialog's – charlietfl Commented Nov 10, 2012 at 17:57
• I have created the modal myself, I'll now like to animate the modal with a 'shrinking' animation. – Nyxynyx Commented Nov 10, 2012 at 18:00
• easy to implement with jQuery animate() method api.jquery./animate Use whatever css properties you want. Also some built in effects like slideUp() , slideDown(). look into source of a plugin for ideas also.. Effects API: api.jquery./category/effects – charlietfl Commented Nov 10, 2012 at 18:01
• I dont see Join now text anywhere in the page – defau1t Commented Nov 10, 2012 at 18:06
• 1 @defau1t geeesh..try ctrl+F – charlietfl Commented Nov 10, 2012 at 18:07

1 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.