How do I transition a centre aligned dynamic text?
<p>I have a centre aligned text that changes due to some action. Can I put a transition there? (<a href="http://codepen.io/prvashisht/pen/vywqYQ" rel="nofollow noreferrer">codepen</a>)</p>

<p>HTML : </p>

<pre><code>&lt;div id="container"&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/div&gt;
</code></pre>

<p>CSS :</p>

<pre><code>#container {
  width: 400px;
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}
</code></pre>

<p>(The above codepen is a sample of dynamic data, in actual, my data is being changed by react states)</p>

<p>EDIT: Only the last part of the text changes for ex <code>Lorem ipsum dolor sit amet consectetur adipiscing elit</code> changes to <code>Lorem ipsum dolor ...</code>. So the I want to show the reduced text coming to center from left (as the remaining text will be on left side when it's cut off)</p>