JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>

<h1>
	<span class="head-static">Together</span>
	<div id="scrolltext">
		<span class="head-scroll one">we consectetur adipiscing elit sed do eiusmod tempor</span>
		<span class="head-scroll two">we ullamco laboris nisi ut aliquip ex ea commodo</span>
		<span class="head-scroll three">we sint occaecat cupidatat non proident</span>
	</div>
</h1>

CSS

#scrolltext {
	width: 70%;
	overflow: hidden;
	background: #eceeef;
	position: relative;
	height: 150px;
}

.head-static, .head-scroll {
	font-family:Arial;
}

.head-static {
	display:block;
	margin-bottom: 1rem;
	font-size: 72px;
	line-height: 72px;
}

.head-scroll {
	font-size: 36px;
	font-weight: bold;
	line-height: 40px;
	animation-duration: 15s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
	animation-iteration-count: 3;
	position: absolute;
	top: 0;
}

.head-scroll.one {
	animation-name: fadeOutUpOne;
}

.head-scroll.two {
	animation-name: fadeOutUpTwo;
}

.head-scroll.three {
	animation-name: fadeOutUpThree;
}

@keyframes fadeOutUpOne {
	0% {
		opacity: 1;
	}
	28% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	30% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOutUpTwo {
	0% {
		opacity: 0;
	}
	31% {
		opacity: 0;
	}
	32% {
		opacity: 1;
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	62% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOutUpThree {
	0% {
		opacity: 0;
	}
	63% {
		opacity: 0;
	}
	64% {
		opacity: 1;
	}
	92% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	94% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 0;
	}
}