* selector의 전환 속성을 사용 하시겠습니까?

Question

*{ transition: all 0.25s linear; }이 성능에 악영향을 미칩니 까, 아니면 좋지 않습니까? 요소의 더 나은 전환을 얻는 다른 방법이 있습니까?

저는 미디어 쿼리에서 값을 변경할 때 요소가 잘리고 깜박 거리지 않도록 요소를 부드럽게 전환하려고합니다.

Answer 1

*{ transition: all 0.25s linear; }을 사용하면 웹 사이트의 모든 요소가 해당 속성을 갖지만 움직이는 요소를 대상으로 타겟팅하는 것은 해당 요소에만 적용된다는 것을 의미합니다. 예를 들어, .animate{transition: all 0.25s linear;}

질문에 대한 성능면에 대해서는 *{ /* style */ }은 훨씬 느립니다. 요소와 스타일의 부하에

#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 */