1

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.

LucasTelesx
  • 305
  • 2
  • 10

1 Answers1

2

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 */
  • I mean like, on load of the elements and styles. Exemple, people with a slow 3g or 2g connection will have a bad experience because the `* { transition: all 0.25 linear; } ` the property is heavy(animations in general). I read something about it at this old post [css-tricks/ universal selector](https://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/) – LucasTelesx Oct 25 '17 at 14:36