CSS: How to add smooth shift to div width upon text change?

Question

If anyone can phrase this question better than I can, please advise and I will alter (or edit yourself).

Here's my current jsfiddle: https://jsfiddle.net/5v7mzadu/

My HTML:

<div class="text-cycler">
    WE <div class="c-text" id="ctext-1">CARE</div>
       <div class="c-text" id="ctext-2">THINK</div>
       <div class="c-text" id="ctext-3">SEE</div>
       <div class="c-text" id="ctext-1">KNOW</div>
</div>

My CSS:

.text-cycler {
     text-align:center;
     font-size:25px;
}
.c-text {
    display:inline-block
}

My Javascript:

var divs = $('div[id^="ctext-"]').hide(),
           i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

As you can see the second word fades in/out,. I'd like to add a smooth transition to the div, so that the width of the div container does NOT abruptly change width size. (so that the width "snap" is more smooth)

Can anyone help?

Answer 1

I believe you needed the animation over the content and text alignment center. And indeed this must solve your purpose.

I have added span{white-space: nowrap; vertical-align: text-top;} to force it to align in single line, and added jQuery animate method to animate the width of the rotating text

And here's the fiddle for you to play around

var divs = $('div[id^="ctext-"]').hide(),
  i = 0;

(function cycle() {
  divs.eq(i)
    .animate(400, function() {

      $('.x').animate({
        width: $(this).innerWidth()
      });
    })
    .fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();

.text-cycler {
  text-align: center;
  font-size: 25px;
}

span {
  white-space: nowrap;
  vertical-align: text-top;
}

.c-text {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
  <span> WE </span>
  <span class="x">
    <div class="c-text" id="ctext-1">CARE</div>
    <div class="c-text" id="ctext-2">THINK</div>
    <div class="c-text" id="ctext-3">SEE</div>
    <div class="c-text" id="ctext-1">KNOW</div>
  </span>
</div>