title: Unable to center vertically css-animated svg
body: <p>Trying to create a zoom-out animation from center. 
  Can't get the svg to center vertically to save my life.
  Also would love to have it zoom out of browser-window width and not reset back to 100%.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt; 
    div {
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: example;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    }
  
    @keyframes example {
      0%   {zoom: 250%}
     33%  {zoom: 500%}
      60%  {zoom: 750%}
      80%  {zoom: 1000%}
      100% {zoom: 1250%}
    }
    body {
      background-color: #4D4D4D;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="#fff"&gt;
      &lt;path d="M0 0h48v48H0z" fill="none"/&gt;
      &lt;path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>