title: css3 animation margin auto not working
body: <p>i want to move the "letsgo" div to animate from left-margin 100% to margin auto. i.e it stop at a point where left margin and right margin are equal. but i can't figure it out.
  Please Help me.</p>
  
  <p>My Code is given bellow:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Do IT...&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;style&gt;
              #letsgo{
                  height: 600px;
                  width: 500px;
                  border: 2px solid #64BBF0;
                  border-radius: 2px;
                  margin: auto;
                  position: relative;
                  animation-fill-mode: forwards;
                  box-shadow: 5px 5px 2px #64BBF0;
                  animation-name: miku;
                  animation-duration: 1s;
  
  
  
              }
              @keyframes miku{
                  0%{
                      margin-left: 100%;
                  }
  
                  100%{
                      margin: auto;
  
                  }
  
  
              }
              #doit{
                  height: 100px;
                  width: 100px;
                  border-radius: 50%;
                  background: yellow;
                  position: absolute;
                  top: 250px;
                  left: 200px;
              }
  
              .child{
                  height: 25px;
                  width:25px;
                  border-radius: 50%;
                  background: red;
                  position: absolute;
                  top: 287.5px;
                  left:237.5px;                               
              }
  
              *{
                  transition: all 2s ease-out;    
              }
  
              #letsgo:hover .child{               
                  box-shadow: -237.5px -287.5px red,
                  -237.5px  287.5px red,
                  237.5px -287.5px red,
                  237.5px 287.5px red,
                  237.5px 0 red,
                  -237.5px 0 red,
                  0 287.5px red,
                  0 -287.5px red;
              }
          }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
              &lt;div id="letsgo"&gt;
                  &lt;div id="doit"&gt;&lt;/div&gt;
                  &lt;div class="child"&gt;&lt;/div&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>