问setInterval()和.delay()

EN

// hide word-rotate spans
$('.word-rotate').hide();

// Set variables
var words = [], 
    index = 0,
    $span = $('.text-rotate');

// Get words within 'word-rotate' spans and push in array
$('.word-rotate').each(function() {
  words.push($(this).text());
});

// Rotate function
function rotateFunction() {
  $span.text(words[index]).fadeIn(0);
  if ( index == words.length -1 ) {
    $span.css('color', '#F42156');
    $span.delay(50000).fadeOut(0);
    index = 0;
    setTimeout(rotateFunction, 5000);
  } else {
    $span.css('color', '#00FFEE');
    $span.delay(500).fadeOut(0);
    index++;
    setTimeout(rotateFunction, 500);
  }
}
setTimeout(rotateFunction, 500);

html {
  background: #313449;
  color: #ffffff;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

.text-rotate {
  color: #00FFEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div>
  <h1>Make it more
    <br />
    <span class="text-rotate"></span>
    <span class="word-rotate">attractive</span>
    <span class="word-rotate">fun</span>
    <span class="word-rotate">colorful</span>
    <span class="word-rotate">fancy</span>
    <span class="word-rotate">intelligent.</span>
  </h1>
</div>

function rotateFunction() {
  $span.text(words[index]).fadeIn(0);
  if ( index == words.length -1 ) {
    setTimeout(function() {
      $span.css('color', '#F42156');
      $span.delay(50000).fadeOut(0);
      index = 0;
      rotateFunction();
    }, 5000);
  } else {
    setTimeout(function() {
      $span.css('color', '#00FFEE');
      $span.delay(500).fadeOut(0);
      index++;
      rotateFunction();
    }, 500);
  }
}

rotateFunction();