title: CSS Animation to expand div from center outwards
body: <p>I am trying to make the following expand outwards from the center (almost like curtains opening).</p>
  
  <p>It should kind of look like this, but instead of <code>-</code> it's empty space.</p>
  
  <ol>
  <li><code>-------------</code></li>
  <li><code>------t------</code></li>
  <li><code>-----sti-----</code></li>
  <li><code>----estin----</code></li>
  <li><code>---Testing---</code></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animation{
    width: 100%;
    text-align: center;
    font-size: 50px;
    padding: 25px;
    background: black;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="animation"&gt;
  Testing
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd also like to make it without using JavaScript if possible.</p>