如何使用具有position：relative且不過度使用CPU的CSS3動畫？

Question

我正在嘗試創建命運之輪類型的動畫。 我在整個設計中使用了4個div，一個在另一個上（使用透明PNG）。

現在，我嘗試使用CSS3對其進行動畫處理，但遇到一個問題：#rotate div的祖先之一相對放置時，CPU跳升到70％以上（我使用的是Macbook Pro 2.3Ghz）。

在下面的示例中，如果我將#main設置為position：absolute，那么它可以正常工作，並且不使用比常規頁面更多的CPU。 但是，當更改為position：relative時，它會跳到70％以上的CPU使用率。

有人知道如何解決此問題嗎？

這是我的代碼示例（出於可讀性考慮，我只編寫了-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>

Answer 1

看來您的文檔隨着輪換而重排，這對CPU來說非常費力。 我會嘗試在#main上指定寬度和高度，或在main上放置一個附加包裝器，並相對#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

如何使用具有position：relative且不過度使用CPU的CSS3動畫？

問題描述

1 個解決方案

解決方案1
0 2011-12-07 06:28:33

如何使用具有position：relative且不過度使用CPU的CSS3動畫？

問題描述

1 個解決方案

解決方案1 0 2011-12-07 06:28:33

解決方案1
0 2011-12-07 06:28:33