CSS3의 'transition: all'이 애니메이션을 느리게 합니까?

CSS3 전환: "전환: 모두"가 렌더링 속도에 영향을 미치나요?

질문:

CSS에서 "transition: all"을 사용하면 여러 요소의 모든 전환 속성을 대상으로 지정하는 동시에 각 속성의 '전환: x'는 특정 속성을 개별적으로 타겟팅합니다. "transition: all"을 사용하면 특정 속성을 타겟팅할 때보다 애니메이션의 속도와 부드러움이 저하됩니까?

답변:

예, "transition: all"을 사용하면 실제로 렌더링 성능에 부정적인 영향을 미칩니다. "전환: 모두"가 적용되면 브라우저는 색상 및 치수 변경과 같이 사용자에게 표시되지 않을 수 있는 속성을 포함하여 적용 가능한 모든 전환 속성을 검색합니다.

이러한 추가 처리로 애니메이션 속도가 느려질 수 있습니다. , 브라우저는 보이는 속성에 대한 전환을 계산할 뿐만 아니라 표시되지 않을 수도 있는 전환도 확인해야 하기 때문입니다.

예:

다음 예에서 "transition: all"을 사용하면 확대/축소 수준이나 글꼴 크기를 변경할 때 불필요한 애니메이션이 발생할 수 있습니다.

/* With "transition: all" */
div, span, a {
  transition: all .2s ease-in;
}

/* With specific transitions */
div {
  transition: margin .2s ease-in;
}
span {
  transition: opacity .2s ease-in;
}
a {
  transition: background .2s ease-in;
}

권장사항:

최적화하려면 애니메이션 성능을 위해서는 일반적으로 "transition: all"을 사용하지 않고 대신 특정 전환 속성을 대상으로 지정하는 것이 좋습니다. 이는 렌더링 속도를 향상시킬 뿐만 아니라 초기 및 전환 스타일이 순차적으로 나타날 수 있는 페이지 로드 중에 원치 않는 애니메이션 스플래시를 방지합니다.

위 내용은 CSS3의 'transition: all'이 애니메이션을 느리게 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!