position : relative 및 CPU을 과도하게 사용하지 않고 CSS3 애니메이션을 어떻게 사용할 수 있습니까?

나는 wheel-of-fortune 타입의 애니메이션을 만들려고 노력하고있다. 전체 디자인에 대해 4 개의 div를 사용하고 있습니다 (투명 PNG 사용).position : relative 및 CPU을 과도하게 사용하지 않고 CSS3 애니메이션을 어떻게 사용할 수 있습니까?

이제는 CSS3를 사용하여 애니메이션을 만들려고했지만 문제가 발생했습니다 : # 회전 div의 조상 중 하나가 상대적 위치에있을 때마다 CPU가 70 % 이상으로 점프합니다 (Macbook Pro 2.3Ghz를 사용하고 있습니다).).

다음 예에서는 #main을 position : absolute로 설정하면 일반 페이지보다 CPU를 더 이상 사용하지 않고 정상적으로 작동합니다. 그러나 position : relative로 변경하면 CPU 사용률이 70 % 이상으로 증가합니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까? 여기

(나는 단지 -webkit 특정 CSS를 썼다 가독성을 위해,하지만 원래의 소스는 모든 주요 현대적인 브라우저에 해당하는 CSS가) 내 코드의 예 :

<html> 

    <body> 
    <style> 

    @-webkit-keyframes rotate { 
     from { 
      -webkit-transform: rotate(0deg); 
     } 
     to { 
      -webkit-transform: rotate(360deg); 
     } 
    } 

    #background { 
    position: absolute; 
    background: url("background.png"); 
    width: 604px; 
    height: 604px;; 
    } 

    #bottom { 
    position: absolute; 
    background: url("wheel_bg.png"); 
    width: 604px; 
    height: 604px;; 
    } 

    #top { 
    position: absolute; 
    background: url("wheel_top.png"); 
    width: 604px; 
    height: 604px;; 
    } 

    #rotate 
    { 
    position: absolute; 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 15s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    background: url("wheel_rotate.png"); 
    width: 604px; 
    height: 604px; 
    left: 0; 
    } 

    #main { 
    position: relative; //here's the problem 
    left: 50px; 
    top: 50px; 
    } 

    </style> 

    <div id="main"> 
    <div id="background"> 
    </div> 
    <div id="rotate"> 
    </div> 
    <div id="top"> 
    </div> 
    <div id="bottom"> 
    </div> 
    </div> 


    </body> 

</html>

출처

2011-12-06 Felipe Brahm

당신의 문서가 리플 로우되는 것을 그 회전은 CPU에 매우 부담이됩니다. #main에 너비와 높이를 지정하려고하거나, 기본 및 위치에 대해 추가 래퍼를 배치합니다. 그 외에는

, 당신은 또한 3D CSS의 변환을 사용하여 GPU를 활용할 수 있습니다, 그냥이 변경 :

@-webkit-keyframes rotate { 
     from { 
      -webkit-transform: rotate3d(0,0,1,0deg); 
     } 
     to { 
      -webkit-transform: rotate3d(0,0,1,360deg); 
     } 
    }

하지만 난 두려워 그-한 문서가 리플 로우 - 당신이대로 수도 이 기술로 인해 상당한 CPU 이득을 볼 수는 없으며보다 부드러운 프레임 속도를 얻을 수 있습니다.

리플 로우에 대한 자세한 정보는 http://code.google.com/speed/articles/reflow.html

출처

2011-12-07 06:28:33 Duopixel

position : relative 및 CPU을 과도하게 사용하지 않고 CSS3 애니메이션을 어떻게 사용할 수 있습니까?

답변

관련 문제