<div id='box'>
  <p>Techs: </p>
</div>
* {
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: black;
}

div {
  display: flex;
  position: absolute;
  left: 10%;
}

p {
  color: white;
  font-size: 8vw;
	font-family: Ubuntu, sans-serif;
}

.namesAnimations {
	font-weight: bold;
	color: red !important;
	position: absolute;
}
const names = ['HTML', 'CSS', 'JAVASCRIPT', 'REACT', 'NODE', 'NEXT', 'RUBY', 'ELIXIR'];
const elements = [];
let current = 0;

const easeOut = (element) => {
	const animation = element.animate([
  	{ transform: 'translateY(-50%) scaleY(0)' }
	], 500);
  animation.addEventListener('finish', () => {
		element.style.transform = 'translateY(50%) scaleY(0)';
	});
};

const easeIn = (element) => {
	const animation = element.animate([
		{ transform: 'translateY(0) scaleY(1)' }
	], 500);
	animation.addEventListener('finish', () => {
		element.style.transform = 'translateY(0) scaleY(1)';
  });
};

const loadElementsToAnimation = () => {
	const allElements = document.querySelectorAll('#elementsAnimation > p');
	Array.from(allElements).map(element => elements.push(element));
};

const createElements = () => {
	const box = document.getElementById('box');
	const div = document.createElement('div');
	names.map((data, index) => {		
		const p = document.createElement('p');
		p.innerHTML = data;
		index === 0 ?
			p.style.transform = 'translateY(0) scaleY(1)'
			: p.style.transform = 'translateY(50%) scaleY(0)';
		p.setAttribute('class', 'namesAnimations');
		div.appendChild(p);
	});
	div.style.position = 'relative';
	div.setAttribute('id', 'elementsAnimation');
	box.appendChild(div);
	loadElementsToAnimation();
};

createElements();

const keyframes = () => {
  easeOut(elements[current]);
  current === (elements.length - 1) ? 
		easeIn(elements[0]) 
		: easeIn(elements[current + 1]);
  if(current++ === (elements.length - 1))
		current = 0;
};

const animation = setInterval(keyframes, 2000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.min.js