title: CPU super load with 'filter: blur()' effect on animated gif
body: <p>I am geeking some visuals rendering in browser and I have a background animated gif that takes full size of the view port:</p>
  
  <pre><code>.background {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-repeat: no-repeat;
      background-size: 150%;
      background-position-x: 50%;
      background-position-y: 50%;
      filter: blur(20px);
      -webkit-filter: blur(20px);
      background-image: url('blabla.gif')
  }
  </code></pre>
  
  <p>Problem: my CPU shoots to the stars with the gaussian blur to be applied on an animated gif.</p>
  
  <p>Can you think of a way to have this blur effect without so much CPU cost? I looked around and all examples uses filter: blur() but most are on normal images so the problem is not there in those cases.</p>
  
  <p>Cheers!</p>