CSS 애니메이션 속성에 대한 자세한 설명

• CSS 애니메이션 속성은 전체 페이지의 리플로우, 다시 그리기 및 재구성을 실행합니다.

• 페인트는 일반적으로 그 중에서 가장 비용 효율적이므로 페인트를 실행하는 CSS 애니메이션 속성은 사용하지 않는 것이 좋습니다. CSS 애니메이션에서 webkit-transform: translateX(3em) 的方案代替使用 left: 3em ，因为left会额外触发layout与paint，而webkit-transform를 사용하면 전체 페이지 합성만 트리거됩니다.

-

웹킷

-

animation-duration:

5s

;

-webkit-animation- 이름: 이동;

-webkit-animation-iteration-count: infinite;

- webkit-animation-direction: alternate;

width: 200px; 높이 : 200px;

margin: 100px 배경-color:

#808080;

위치:

절대

;}

@-webkit-keyframes 이동 { from { left: 100px; } to { left: 200px; } }

아래와 같이 사용

하면 페이지 재설정이 계속 실행됩니다. 빨간색 테두리로 그려짐: left

@-webkit-keyframes move{

​​ ​

} to { ㅠㅠ

  }}

ㅋㅋㅋ border:

CSS 애니메이션의 CSS 속성 동작 테이블

고성능 CSS3 애니메이션

-webkit-transformPC 시나리오에 비해 고성능 모바일 웹 시나리오에서는 고려해야 할 요소가 점점 더 복잡해집니다. 이를 다음과 같이 요약합니다. 포인트: 트래픽, 전력 소비 및 유창함. PC 시대에는 경험의 부드러움이 더 중요하지만, 모바일 측의 풍부한 시나리오에서는 사용자 기지국 네트워크 트래픽 사용량과 장비의 전력 소비에 더욱 주의를 기울여야 합니다.

유창함은 주로 프런트엔드 애니메이션에 반영됩니다. 기존 프런트엔드 애니메이션 시스템에는 일반적으로 JS 애니메이션과 CSS3 애니메이션의 두 가지 모드가 있습니다. JS 애니메이션은 JS를 사용하여 스타일을 동적으로 다시 작성하여 애니메이션 기능을 구현하는 솔루션으로, 저사양 브라우저와 호환되는 PC에 권장되는 솔루션입니다. 모바일 측면에서는 더 나은 성능을 제공하는 기본 브라우저 구현인 CSS3 애니메이션을 선택합니다.

그러나 CSS3 애니메이션은 모바일 다중 터미널 장치 시나리오에서 PC보다 더 많은 성능 문제에 직면하게 되며 주로 애니메이션 끊김 및 깜박임에 반영됩니다.

• 현재 모바일 CSS3 애니메이션 환경을 개선하는 몇 가지 주요 방법이 있습니다.
  3D 변형을 사용하여 GPU 가속을 켜는 등 하드웨어 기능을 최대한 활용하세요

-

webkit

-

transform:translate3d,

(

0

,

0

0

); -moz-transform: translate3d(0, 0,

0

); -ms-transform: translate3d(0, 0,

0

); transform: translate3d(0, 0, 0);

애니메이션 중에 깜박임이 있는 경우(일반적으로 애니메이션 시작 부분에 발생) 다음 해킹을 시도해 볼 수 있습니다.

-

webkit -backface-

visibility

:

hidden

;

-moz-backface -가시성 : 숨김;

-ms-backface-visibility: hidden;

뒷면-가시성: 숨겨짐 ;

-webkit-perspective: 1000;

-moz-관점 : 1000 ;

-ms-perspective: 1000;

관점: 1000;

예를 들어 다음 요소는 translate3d右移500px的动画流畅度会明显优于使用left 특성을 전달합니다.

#ball-1 { ​​전환 : -webkit-transform .5s ease; -webkit- 변환: translate3d(0, 0, 0); } #ball-1.슬라이드인 { -webkit-transform: translate3d(500px, 0, 0); } #ball-2 { transition: left 5s ease;. left: 0; } #ball-2.slidein { left: 500px; }

참고: 3D 변형은 더 많은 메모리와 전력을 소비하므로 성능 문제가 있는 경우에만 사용해야 하며 절충을 해야 합니다

box-shadows를 적게 사용하는 것이 가능하며 gradientsbox-shadows与gradients

box-shadows与gradients

box-shadows 및 gradients가 향상되는 경향이 있습니다. 특히 하나의 요소에 두 가지를 모두 사용하는 경우에는 페이지 성능이 저하되므로 플랫 디자인을 수용하세요.

리플로우를 줄이기 위해 애니메이션 요소를 문서 흐름에서 최대한 멀리 유지하여

position: fixed; 위치: 절대;

🎜

DOM 레이아웃 성능 최적화

이 주제는 예를 들어 설명합니다.

var newWi dth = aDiv. offsetWidth + 10; aDiv.style.너비 = newWidth + 'px' ; var newHeight = aDiv.offsetHeight + 10; aDiv.style.height = newHeight + 'px'; var newWidth = aDiv.offsetWidth + 10; var newHeight = aDiv . offsetHeight + 10; aDiv.스타일 . 너비 = 새 너비 + ' px' ; aDiv.style.height = newHeight + 'px';

이 두 코드는 기능면에서 완전히 동일합니다. 보시다시피 명시적인 차이점은 실행 순서뿐입니다. 하지만 정말 그렇습니까? 다음은 주석 주석의 코드 버전으로, 추가 차이점을 설명합니다.

// 두 레이아웃을 트리거하는 트림 var NewWIDTH 下= aDiv.offsetWidth + 10; // 읽기 aDiv.style. width = newWidth + 'px';  // Write var newHeight = aDiv .offsetHeight + 10; // 읽기 aDiv.style.height = newHeight + 'px'; // Write //레이아웃은 한 번만 실행합니다 var newWidth = aDiv.offsetWidth + 10; // 읽기 var newHeight = aDiv.offsetHeight + 10; // 읽기 aDiv.style.너비 = newWidth + 'px'; ​ // 쓰기 aDiv.style.height = newHeight + 'px';   // 쓰기

offsetWidth/Height 속성을 계속 읽고 width/height 속성을 계속 설정하면 단일 속성을 읽고 설정하는 것보다 더 적은 수의 트리거가 트리거될 수 있습니다. 별도로 하나의 레이아웃.

결론적으로 보면 실행큐와 관련이 있는 것 같습니다. 네, 이것이 브라우저의 최적화 전략입니다. 레이아웃을 실행할 수 있는 모든 작업은 임시로 layout-queue에 저장됩니다. 업데이트가 필요한 경우 전체 대기열의 모든 작업 결과가 이러한 방식으로만 수행됩니다. 한 번 성능을 향상시키세요. layout-queue 中，等到必须更新的时候，再计算整个队列中所有操作影响的结果，如此就可只进行一次的layout，从而提升性能。

关键一，可触发layout的操作，哪些操作下会layout的更新（也称为reflow或者relayout

핵심은 레이아웃 작업이 트리거될 수 있다는 것입니다. 어떤 작업에서 레이아웃이 업데이트되는지(리플로우 또는 릴레이아웃라고도 함) )?

오픈 소스 Webkit/Blink를 예로 들어 브라우저의 소스 코드 구현부터 시작합니다. 레이아웃을 업데이트하기 위해 Webkit은 주로 Document::updateLayout 및 Document::updateLayoutIgnorePendingStylesheets:

의 두 가지 방법을 사용합니다.

void Document::updateLayout() { ASSERT(isMainThread( )); FrameView* frameView = view(); ​​​​if ( frameView && frameView->isInLayout()) { ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​                                                                       ( Element * oe = ownerElement ( )) 레이아웃( ) ;     updateStyleIfNeeded();       StackStats::LayoutCheckPoint layoutCheckPoint;       if (frameView && renderer() && (frameView->layoutPending() || renderer()-> needsLayout()) )         frameView->layout() ;       if (m_focusedNode && !m_didPostCheckFocusedNodeTask ) {         postTask(CheckFocusedNodeTask::create());         m_didPostCheck FocusedNodeTask = true;     } }     void Document::updateLayoutIgnorePendingStylesheets() {     bool old무시 = m_ignorePendingStylesheets;       if (!haveStylesheets 로드됨()) {         m_ignorePendingStylesheets = true;           HTMLElement* bodyElement = body();         if (bodyElement && !bodyElement->renderer() && m_pendingSheetLayout == NoLayoutWithPendingSheets) {             m_pendingSheetLayout = DidLayoutWithPendingSheets;            styleResolverChanged (RecalcStyle즉시);        } else if (m_hasNodesWithPlaceholderStyle)            recalcStyle(Force );     }       updateLayout();       m_ignorePendingStylesheets = oldIgnore; }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ㅋㅋㅋ场景都是调用 updateLayoutIgnorePendingStylesheets 来进行layout的更新。

 

위 내용은 CSS 애니메이션 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!