title: How to convert this CSS animation to use GPU level, instead of updating layer tree
body: <p>I was trying to understand fps lag on my CSS object. </p>
  
  <p>I checked my timeline, and saw that this animation I wrote is causing an update to the layer tree on every interval, which is normal.</p>
  
  <p>All this animation does is extend the width of a bar. It repeats over and over until my JavaScript removes the class from the HTML element (div tag). </p>
  
  <p>How could I convert this to use GPU layer (composite layer) or any tips to increase the performance (rendering/fps), because it has to start up while there are other animations not in my control through external iframes. YouTube html5 embedded player is one.</p>
  
  <p><em>Is there way way to convert this (animating the width of the bar) to a GPU layer instead? Can I translate it somehow? or is there something better?</em></p>
  
  <p>There are 3 bars. This is the animation for it, not the styling.</p>
  
  <pre><code>@keyframes color-bar {
    0%   { width:17px;  }
    10%  { width:11px;  }
    20%  { width:37px;  }
    30%  { width:30px;  }
    40%  { width:15px;  }
    50%  { width:10px;  }
    60%  { width:24px;  }
    70%  { width:17px;  }
    80%  { width:21px;  }
    90%  { width:32px;  }
    100% { width:17px;  }
  }
  .lines-ani {
      transform: rotateY(180deg);
  }
  .lines-ani .lines {
      animation: color-bar 1.5s 2s ease-out alternate infinite;
  }
  .lines-ani .lines:before {
      animation: color-bar 1.5s 1.5s ease-out alternate infinite;
  }
  .lines-ani .lines:after {
      animation: color-bar 1.5s 2.5s ease-out alternate infinite;
  }
  </code></pre>