Use transition property on * selector?

Question

Use the *{ transition: all 0.25s linear; } harms the performance, or is a bad practice? There is an other way to get an better transition of the elements?

I'm trying to make an smooth transition of the elements, to not have those cut off and blink on the elements when change the values on media queries.

Answer 1

If you use *{ transition: all 0.25s linear; } it means that every element in your website will have that property, whereas targeting the element you'll be animating will only apply to that element. For example .animate{transition: all 0.25s linear;}

If your question is about performance, then *{ /* style */ } is by far the slowest.

ID's are the most efficient, Universal are the least:

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */