Why transform:translatex in this css class does not move the div sideway?
<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>