word cycle

by jorgeluis

HTML

<h1 class="word-cycle">We make <abbr title="information technology">IT</abbr> easy to 
  <span>manage.</span>
</h1>

CSS

.word-cycle span {
  position: absolute;
  margin-left: 0.2em;
  opacity: 0;
  animation: fadeInOut 2s ease-in forwards;
}
.word-cycle span:nth-last-of-type(1) {
  animation: fadeIn 0.2s ease-in forwards;
  color: red;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
	}
  20%, 80% {
    opacity: 1;
  }
  100% {
		opacity: 0;
    display: none;
	}
}

@keyframes fadeIn {
	0% { opacity: 0; }
  100% { opacity: 1; }
}

JavaScript

var words = [
    'use', 'customize', 'migrate', 'scale', 'secure', 'automate', 'love'
  ];
  var wordCycle = document.querySelector('.word-cycle');
  words.forEach((word, i) => {
  	let span = document.createElement('span');
    span.style.animationDelay = i * 2 + 's';
    span.textContent = word;
    wordCycle.append(span);
  })
  var cycle = wordCycle.querySelectorAll('span');
  cycle.forEach((word, i) => {
    word.style.animationDelay = i * 2 + 's';
  });