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.

[css]
*{transition: all 0.3s ease 0.0s;}
[/css]

Example 1: Button with hover selector

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LkrkXm” default_tab=”css,result” user=”sfaisal”]See the Pen <a href=’http://codepen.io/sfaisal/pen/LkrkXm/’>Button CSS3 Transition</a> by FAISAL ALSABEA (<a href=’http://codepen.io/sfaisal’>@sfaisal</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Example 2: Using jQuery add new style to the button

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”YWdWod” default_tab=”js,result” user=”sfaisal”]See the Pen <a href=’http://codepen.io/sfaisal/pen/YWdWod/’>Button CSS3 Transition & jQuery</a> by FAISAL ALSABEA (<a href=’http://codepen.io/sfaisal’>@sfaisal</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

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