title: If it is possible to animate image pixelation without canvas, using only CSS
body: <p>So you can get pixelation in CSS by doing the following:</p>
  
  <ul>
  <li>Set <code>background-image</code> to a very small image (say 50px or 100px).</li>
  <li>Set <code>image-rendering: pixelated</code> on the element.</li>
  </ul>
  
  <p>That will give you the pixelated look.</p>
  
  <p>Now I would like to animate this, by replacing the "very small image" with a large image after it finishes downloading by the browser:</p>
  
  <pre><code>let img = new Image()
  img.src = largeVersion
  img.onload = function(){
    // set css background-image to the new image perhaps, not sure...      
  }
  </code></pre>
  
  <p>The problem is two-fold.</p>
  
  <ol>
  <li>I want to have the <code>background-image</code> using <code>background-size: cover</code> so it properly fills the container element. So you can't use background-size in any pixelation animation.</li>
  <li><code>transform: scale(0.1)</code> (to get close to the original pixelation size) doesn't work because it scales the whole element.</li>
  </ol>
  
  <p>I would like to do something like this: animate <code>transform: scale(x)</code> to go from 50px pixelated image to 2000px unpixelated image, over 0.3 or 0.5 seconds. But that doesn't work. I thought maybe using background-size, but that doesn't work either because of the constraint.</p>
  
  <p>Wondering if there is any way to accomplish this.</p>
  
  <p>I have seen <a href="https://github.com/miguelmota/pixelate" rel="nofollow noreferrer">this</a> which does pixelation using canvas. Wondering if there is no other solution that works without using JS/canvas.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
    div {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
  &lt;/style&gt;
  &lt;div style='background-image: url(/100px.jpg)'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>