Как я могу использовать CSS3-анимацию с позицией: относительной и без чрезмерной загрузки процессора? - PullRequest
Новая
       12

Как я могу использовать CSS3-анимацию с позицией: относительной и без чрезмерной загрузки процессора?

0 голосов
/ 06 декабря 2011

Я пытаюсь создать анимацию типа "колесо фортуны". Я использую 4 деления, один поверх другого (с прозрачными PNG) для всего дизайна.

Сейчас я пытаюсь анимировать его с помощью CSS3, но столкнулся с проблемой: когда один из предков #rotate div находится в относительно позиционированном состоянии, процессор переходит на 70% (я использую Macbook Pro 2.3 ГГц) .

В приведенном ниже примере, если я устанавливаю #main в position: absolute, тогда он работает просто отлично, не используя больше процессора, чем обычная страница. Но при переходе в положение: относительное оно переходит на более чем 70% загрузки процессора.

Кто-нибудь знает, как обойти эту проблему?

Вот пример моего кода (для удобства чтения я написал только CSS -webkit, но исходный код имеет соответствующий 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>

1 Ответ

0 голосов
/ 07 декабря 2011

Кажется, ваш документ переворачивается с поворотами, что очень сильно нагружает процессор.Я бы попытался указать ширину и высоту в #main или поместить дополнительную обертку поверх основного и позиционировать относительно этого.

Кроме этого, вы также можете воспользоваться преимуществами графического процессора с помощью трехмерных CSS-преобразований., просто измените это: 

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

Но я боюсь, что - пока документ переформатируется - вы можете не увидеть значительного выигрыша ЦП от этой техники, просто сглаживание кадров.

Для получения дополнительной информации по оплавлениям, http://code.google.com/speed/articles/reflow.html

...