title: CSS Transition Width From Center
body: <p>Okay, so I want my container to open up from the center to the specified width when on hover of the parent. </p>
  
  <p>The problem is that I can't get it to not open up from the left. I want it to work similarly to <a href="https://stackoverflow.com/questions/43669337/css-transition-width-of-line-to-center">this situation here</a>. </p>
  
  <p>If possible, I'd like the animation for the corners of the container to activate after it has done it's first animation.</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-css lang-css prettyprint-override"><code>body {
    background: #4e4e4e;
  }
  
  #music {
    position: absolute;
    top: 5px;
    left: calc(50% - 50px);
    width: 50px;
    height: 50px;
    border: 1px solid white;
    background-color: #000;
    opacity: 1;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
  }
  
  #music:hover {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
  }
  
  #music img {
    height: 30px;
    width: 30px;
    margin-top: 10px;
  }
  
  #music:hover .music-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    height: 23px;
    width: 210px;
    margin-top: 8px;
    opacity: 1;
    background-color: #000;
    color: #000;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
  }
  
  .music-container {
    height: 23px;
    width: 0px;
    position: absolute;
    background-color: #000;
    padding-left: 10px;
    border: 1px solid white;
    margin-left: -85px;
    margin-top: 8px;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="music"&gt;
    &lt;center&gt;
      &lt;img src="https://i.imgur.com/cgIfJId.gif" /&gt;
    &lt;/center&gt;
    &lt;div class="music-container"&gt;
      &lt;center&gt;
        &lt;font color="white" size="1"&gt;
          jsfiddle can't load my music lol
        &lt;/font&gt;
      &lt;/center&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>