title: Why transform:translatex in this css class does not move the div sideway?
body: <p>I want to move a div across a screen. The div is set to <code>width:100%</code> initially. But when the transformation starts, the size of the div seems to have shrinked (the blue border just wraps around the text). Why it  is the case?</p>
  
  <p><strong>Before</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Vk1Ti.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vk1Ti.png" alt="enter image description here"></a></p>
  
  <p><strong>After</strong></p>
  
  <p><a href="https://i.stack.imgur.com/uGHbj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uGHbj.png" alt="enter image description here"></a></p>
  
  <p>Here is my code example</p>
  
  <p><a href="http://codepen.io/kongakong/pen/MKzmMm" rel="nofollow noreferrer">http://codepen.io/kongakong/pen/MKzmMm</a></p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$(document).ready(function () {
    init();
  });
  
  function init() {
    $('input').on('click',
      function () {
        $('.answer-text-2').closest('.answer').addClass('textout');
        $('.answer-hide').addClass('textin');
      });
  }
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.row {
  }
  
  .hidden {
    display: none;
  }
  
  .answer-text-2 {
    color: red;
    opacity: 1;
    margin: auto;
  }
  
  .answer-text-2-new {
    color: blue;
    opacity: 0;
    margin: 500;
  }
  
  .textout {
    /* display: none; */
    margin: -500;
    opacity: 0;
    width: '50%';
    transition: all 3s ease-in-out;
  }
  
  .answer-hide {
     border: 1px solid blue;
     width: '100%';
  }
  .textin {
    position: absolute;
    margin: 0;
    left: 0;
    transform: translateX(10000px);
    transition: transform 5s ease-in-out;
  }
  </code></pre>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div class="contrainer"&gt;
    &lt;div&gt;
      &lt;input type='button' value="test"&gt;&lt;/input&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="answer"&gt;
        &lt;span class="answer-text-2"&gt;To disappear&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="answer-hide"&gt;To move sideway
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>