How to make everything in your website animated by one CSS3 line only

With this one line of CSS3, everything that has hover selector or you change the class of the element using jQuery, there will be a transition between these two different styles.

Simply, add this line anywhere in the website css file.

*{transition: all 0.3s ease 0.0s;}

Example 1: Button with hover selector

See the Pen Button CSS3 Transition by FAISAL ALSABEA (@sfaisal) on CodePen.dark

Example 2: Using jQuery add new style to the button

See the Pen Button CSS3 Transition & jQuery by FAISAL ALSABEA (@sfaisal) on CodePen.dark

A better explanation for CSS3 Transition on W3Schools, CSS-Tricks and MDN.

 

Leave a Reply

Your email address will not be published. Required fields are marked *