Shrink/Grow animation using jQuery/CSS

11,915

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.

Share:
11,915
Nyxynyx
Author by

Nyxynyx

Hello :) I have no formal education in programming :( And I need your help! :D These days its web development: Node.js Meteor.js Python PHP Laravel Javascript / jQuery d3.js MySQL PostgreSQL MongoDB PostGIS

Updated on June 04, 2022

Comments

  • Nyxynyx
    Nyxynyx almost 2 years

    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.