CSS 전환 추가

Question

크롬에 크롬에 이상한 CSS 효과가 발생했습니다 (Firefox에서는 발생하지 않음).

나는 웹 사이트 요소의 90 % 이상에서 전환을 사용해야하므로 기본적으로 * CSS 선택기를 사용하여 모든 전환을 추가했습니다.

캡슐화 된 요소가있을 때 이상한 지연이 발생합니다. 이는 많은 일이 발생하고 실제로 성가신 일입니다.

전역 요소가 아닌 모든 단일 요소에 전환을 적용하는 것 외에 다른 방법으로 해결할 수 있습니까?

감사합니다.

* { 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<p>Test <span>test2</span></p>

편집

: 나는 이미 당신에 의해 더 나은 요소를 대상 것을 해결할 수 알지만 그렇게하지 않고 방법을 부탁 해요.

Answer 1

이 솔루션은 모든 전환 된 요소를 타겟팅하는 것과 같은 방향으로 이동하지만 모든 컨테이너 요소를 대상으로하는 역방향만으로도 원활하게 진행됩니다. 초기 문제는 해결되지 않습니다. 왜 부모 요소가 전환을 갖기 때문에 지연이 생기므로 먼저 부모 전환을 완료 한 다음 자식 전환을 시작합니다 ... 내 시도는 모든 마지막 자식을 선택하려고 시도하는 것입니다. 두 번째 규칙에 모든 컨테이너 요소를 추가해야 할 것, 어쩌면

* { 
 
    transition: all 0.3s; 
 
} 
 

 
*:not(body):not(div) > * { 
 
    transition: none; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<div> 
 

 
    <p>Test <span>test2</span></p> 
 

 
</div>

을하는 데 도움이 : 그들은 이미 그들의 부모를 통해 전환이 있기 때문에 다음

편집 ..., 그들에 전환을 비활성화