title: CSS keyframe animation CPU usage is high, should it be this way?
body: <p>I use following keyframe animation on several elements:</p>
  
  <pre><code>@keyframes redPulse {
      from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
      50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
      to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
  }
  @-webkit-keyframes redPulse {
      from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
      50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
      to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
  }
  .event_indicator {
      display: inline-block;
      background-color: red;
      width: 5px;
      margin-right: 5px;
  
      -webkit-animation-name: redPulse;
      -webkit-animation-duration: 1s;
      -webkit-animation-iteration-count: infinite;
  
      animation-name: redPulse;
      animation-duration: 1s;
      animation-iteration-count: infinite;
  }
  </code></pre>
  
  <p>On my computer I am getting around 40% CPU usage both in Chrome and Firefox. 
  Is it the current state of animations (nice but not usable for now) or am I missing some magic property?</p>
  
  <p>You can check the following sample with the same animation:
  <a href="http://jsfiddle.net/Nrp6Q/" rel="noreferrer">http://jsfiddle.net/Nrp6Q/</a></p>