Changing text occurs instant in width for element - html

Question

So I'm attempting to make an "over time" text changer which changes a word in a sentence each few seconds, that code runs fine thou when the text is actually changed, the width of the sentence changes instantly removing the smoothness from the website.
Structure:
<div id="big">
This is some <span id="change">text</span>
</div>
The word changing is #change. I've tried using CSS transitions for width as well as transition properties:
margin-top: 18%;
font-size: 70px;
font-family: 'Slabia 27px', 'Droid Serif', Arial;
>> text-align: center;
text-transform: uppercase;
>> -webkit-transition-property: width;
>> -webkit-transition-duration: 2s;
>> transition: width .8s ease;
Also my jQuery (calls APP.init()):
var APP = {
init: function() {
loopChangeWord = setInterval(function(){
var $change = $('#change');
var iteration = ['quick', 'efficiently', 'well', 'together'];
var current = $change.html();
for (var i = 0; i < iteration.length; i++) {
if (iteration[i] == current) {
if (i+1 > iteration.length-1) var nw = iteration[0];
else nw = iteration[i+1];
$change.fadeOut(500, function(){
$change.html(nw).fadeIn(500);
});
}
}
}, 4000);
}
};
In the end** I'm asking for a way for a smooth transition of the text being changed, I expected the width change would trigger the CSS animation thou was wrong!

Answer 1

I had to change the text value which is in your <span id="change">text</span> to match either one value of your var iteration = ['quick', 'efficiently', 'well', 'together']; array.
Here is the working demo: https://jsfiddle.net/5p36n34j/1/
Hope this helps!

Answer 2

Here's an example using transition: all .8s ease; on #change instead of transition: width .8s ease; on #big.
var fontSize = 10;
$('#big').click(function() {
fontSize = fontSize * 2.2;
$('#change').css('fontSize', fontSize + 'px');
})
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#big {
margin-top: 18%;
font-family: 'Slabia 27px', 'Droid Serif', Arial;
text-align: center;
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
border: solid black 1px;
padding: 20px;
}
#change {
transition: all .8s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="big">
Click on this <span id="change">text</span>
</div>