title: Animate changing words width
body: <p>I have a sentence where I fade in one word and replace it with another from an array. However, since the words all vary in length, the sentence width abruptly changes and it results in a choppy transition.<br>
  <strong>How can I animate the width change</strong>? I tried adding a transition to the container of the sentence in css but that didn't work. I applied the transition as <code>1.5s all linear</code>, so it should be animating the width as well as everything else whenever there is change. Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var hello = ['dynamic', 'a', 'aklsjdlfajklsdlkf', 'asdf'];
    var used = ['dynamic'];
    var greeting = $('#what');
    var item;
  
    function hey() {
  
      item = hello[Math.floor(Math.random() * hello.length)];
      if (hello.length != used.length) {
        while (jQuery.inArray(item, used) != -1) {
          item = hello[Math.floor(Math.random() * hello.length)];
        }
        used.push(item);
      } else {
        used.length = 0;
        item = hello[Math.floor(Math.random() * hello.length)];
        used.push(item);
      }
      greeting.html(item);
      greeting.animate({
        "opacity": "1"
      }, 1500);
    }
  
    window.setInterval(function() {
      greeting.animate({
        "opacity": "0"
      }, 1500);
      setTimeout(hey, 1500)
    }, 5000);
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#sentence {
    transition: 1.5s all linear;
  }
  
  #what {
    font-style: italic;
    text-decoration: underline;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="sentence"&gt;
    This is a sentence that has &lt;span id="what"&gt;dynamic&lt;/span&gt; text that alters width.
  &lt;/p&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: Sorry if I was unclear, I only want to fade out the word, not the entire sentence. I'm trying to animate the width to fit the new word. I don't want to change/add any elements, just solve with the current tags in place.</p>