title: CSS Animation - Grow from center (Zoom from center dot to full container)
body: <p>I'm working on a game and I want to animate some boxes.</p>
  <p>I want a box to start from small and then grow outwards, with all edges growing at the same time in an effect that looks like it is growing outwards from the center.</p>
  <p>The best animation I have so far is the following: it grows the height and the width of the box as I want, but starts from the left and top. I would like it to start from a center point.</p>
  <p>I looked at the animation properties on W3 and nothing seems to fit the boat.</p>
  <pre><code>  .box_2_gen{
      
      animation-duration: 0.25s;
      animation-name: createBox;
  
      position: relative;
  
      background: #FFEDAD;
  
      border: black solid;
      border-width: 1px;
      border-radius: 15px;
  
      width: 98px;
      height: 98px;
  
      margin: 10px;
  
      float: left;
  }
  
  
  
  @keyframes createBox{
      from{
          height:0px;
          width: 0px;
  
      }
      to{
          height: 98px;
          width: 98px;
      }
  }
  </code></pre>
  <p>EDIT: My question may seem like another similar one, but I just wanted to know how to do it using only keyframes.</p>
  <p>Thanks,</p>