CSS3-анимация - бесконечное вращение изображения в высоком разрешении, теневое свечение

ОБНОВИТЬ

Теперь протестировали некоторые другие решения и создали скрипку. Код в этом скрипте верен, но анимации не могут отображаться для некоторых браузеров. Однако теперь все могут видеть, как мой убийца по производительности живет. = DI надеюсь, что это поможет найти лучшее решение для создания этой анимации!

кликните сюда

После нескольких часов тестирования альтернативы я не могу увеличить свою производительность в Firefox 25 или Internet Explorer 10. (В настоящее время в Chrome используется 15% i7-CPU). В моем проекте у меня есть жидкий div-Container, который изменяется на текущее разрешение экрана. Этот div-Container имеет закругленные границы (50%) и отображается как круг (не совсем, но это еще одна ошибка!). В этом div-Container у меня есть изображение с высоким разрешением (2880px * 2880px), которое изменяется с увеличением и шириной div-Container. Div-Container вращается бесконечно, а также обладает сияющим импульсным эффектом вокруг него. Светящийся импульсный эффект (коробка-тень) изменяет цвет и ширину, а также отображается как круг вокруг жидкого разделительного контейнера.

Я попытался восстановить эти эффекты с помощью flash, jquery и GIF-Images. С этим высоким разрешением Flash также имеет проблемы с производительностью. jQuery имеют низкий FPS и не выглядят хорошо. GIF-изображения с этим разрешением становятся большими.

Теперь вот пример:

HTML-разметка

<div id="disk">
   <div id="pulse"></div>
</div>

<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
 function upd() {
  var h = $("body").height();
  $("#disk").height(h / 1.5);
  $("#disk").width(h / 1.5);
            }
  upd();
  window.onresize = upd;
});//]]>
</script>

CSS-разметки

#disk {
  border-radius: 50%;
  background-image: url(hires.png);
  background-size: 100% 100%;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  position: absolute;
  animation: rotate 5s infinite linear;
  transform: translateZ(0);
}
@keyframes rotate {
  0% {   transform: rotateZ(0);}
  100% {  transform: rotateZ(359deg); }
}
#pulse {
  position: absolute;
  border-radius: 50%;
  animation: pulse 60s infinite linear;
  left:0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  transform: translateZ(0);
}
@keyframes pulse {
  0%  { box-shadow: 0 0 50px rgba(255,255,555,0.9); } 
  5%  { box-shadow: 0 0 200px rgba(255, 0, 0,0.9); }
  10% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  15% { box-shadow: 0 0 200px rgba(255, 255, 127,0.9); }
  20% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  25% { box-shadow: 0 0 200px rgba(255, 255, 0,0.9); }
  30% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  35% { box-shadow: 0 0 200px rgba(103, 255, 190,0.9); }
  40% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  45% { box-shadow: 0 0 200px rgba(0, 255, 0,0.9); }
  50% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  55% { box-shadow: 0 0 200px rgba(0, 0, 255,0.9); }
  60% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  65% { box-shadow: 0 0 200px rgba(75, 0, 130,0.9); }
  70% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  75% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  80% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  85% { box-shadow: 0 0 200px rgba(143, 0, 255,0.9); }
  90% { box-shadow: 0 0 50px rgba(255,255,555,0.2); } 
  95% { box-shadow: 0 0 200px rgba(0,0,0,0.9); }
 100% { box-shadow: 0 0 50px rgba(255,255,555,0.9); }
}

Я знаю, что анимация box-shadow - это убийцы производительности. Но в настоящее время я не могу разработать другое решение для своего проекта. Вращение жидкого div-Container использует 5% моего i7-процессора в Chrome и многое другое. (без импульсного эффекта) Возможно, я смогу удалить некоторые ключевые кадровые фреймы и свести к минимуму количество этой анимации. Но я хочу, чтобы мои эффекты работали без проблем с производительностью в исходных условиях.

Я надеюсь, что кто-то может мне помочь. При необходимости я могу создать для вас пример. Спасибо за внимание.