Ich habe einen Satz, in dem ich ein Wort einblende und durch ein anderes aus einem Array ersetze. Da jedoch alle Wörter unterschiedlich lang sind, ändert sich die Satzbreite abrupt und es kommt zu einem abgehackten Übergang.
Wie kann ich die Breitenänderung animieren?? Ich habe versucht, dem Container des Satzes in CSS einen Übergang hinzuzufügen, aber das hat nicht funktioniert. Ich habe den Übergang als angewendet1.5s all linearEs sollte also die Breite und alles andere animieren, wenn sich etwas ändert. Irgendwelche Ideen?

$(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);

});

#sentence {
  transition: 1.5s all linear;
}

#what {
  font-style: italic;
  text-decoration: underline;
  color: red;
}

<p id="sentence">
  This is a sentence that has <span id="what">dynamic</span> text that alters width.
</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

EDIT: Entschuldigung, wenn ich unklar war, möchte ich nur das Wort ausblenden, nicht den gesamten Satz. Ich versuche, die Breite zu animieren, um sie an das neue Wort anzupassen. Ich möchte keine Elemente ändern / hinzufügen, sondern nur mit den aktuellen Tags lösen.