テキストを1文字ずつスライドしてフェードイン表示

JavaScript (ES6以降)

(() => {
	window.addEventListener('DOMContentLoaded', () => {
		const parentElem = document.querySelector('.sample');
		const addDelay   = 100; // 表示遅延秒数

		let delay = 0, childNodes = [];

		parentElem.childNodes.forEach(childElem => childNodes.push(childElem));

		childNodes.forEach(childElem => {
			if (childElem.nodeType !== 3) return true;

			childElem.textContent.split('').forEach(char => {
				const charElem = document.createElement('span');
				charElem.innerHTML = char === ' ' ? ' ' : char;
				charElem.classList.add('anim');
				charElem.classList.add('hidden');
				charElem.style.transitionDelay = `${delay}ms`;

				charElem.addEventListener('transitionend', event => {
					if (event.propertyName === 'opacity') return true;
					event.target.replaceWith(event.target.textContent);
				});

				parentElem.insertBefore(charElem, childElem);

				delay += addDelay;
			});

			parentElem.removeChild(childElem);
		});

		setTimeout(() => {
			parentElem.querySelectorAll('.hidden').forEach(charElem => {
				charElem.classList.remove('hidden');
			});
		}, 100);
	});
})();

CSS

.sample span.anim {
	display:inline-block;
	transition:opacity 0.4s ease-out, translate 0.4s ease-out;
}

.sample span.hidden {
	opacity:0;
	translate:0 -1em;
}