CSS: How to add a smooth transition to div width when changing text?

Question

If someone can formulate this question better than I can, consult and I will change (or edit myself).

Here is 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 disappears. I would like to add a smooth transition to the div, so the width of the container div does NOT drastically change the width size. (so the snapping width is smoother)

Can anyone help?

Answer 1

, . , .

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

fiddle,

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>

Hide result

Answer 2

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

(function cycle() { 

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

  i = ++i % divs.length;

})();

.text-cycler {
  font-size:25px;
  position:fixed; /*added*/
  padding-left:40% /*added*/
}

.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" align="center">
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>

Hide result

Answer 3

. div div 50%, div, text-align :

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

(function cycle() { 

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

  i = ++i % divs.length;

})();

.text-cycler {
  text-align:left;
  font-size:25px;
}
.c-text, .s-text {
  display: inline-block;
  width: 50%;
  float: left;
}
.s-text {
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
<div class="s-text" id="stext-1">WE&nbsp;</div>
<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>

Hide result

Answer 4

JavascriptLess.

. (, , , )

.text-cycler {
  width:75%;
  margin:auto;
  user-select: none;
  text-align:center;
  font-size:5vw;
}
.text-cycler:after {
  content:"";
  display:inline-block;
  animation: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes change {
  0% {
    content: "CARE";
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  25% {
    content: "CARE";
    opacity: 0;
  }
  25.1% {
    content: "THINK";
  }
  28% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  50% {
    content: "THINK";
    opacity: 0;
  }
  50.1% {
    content: "SEE";
  }
  53% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  75% {
    content: "SEE";
    opacity: 0;
  }
  75.1% {
    content: "KNOW";
  }
  78% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    content: "KNOW";
    opacity: 0;
  }
}

<div class="text-cycler">
  WE
</div>

Hide result