Change text with a CSS3 animation?

Question

In my website I want to have a header that fades in and out, then in with different text, then out, then back to normal (looped). Here\'s how I would like it to work:

<

Answer 1

Hour ago, been stuck with same question but my decision is this. Just pasted a part of my own code. Check it out, guys!

body {
	margin: 0;
	font-family: sans-serif;
}

#wrapper {
	background-color: #051E3E;
	height: 100vh;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

#hi {
	animation: pulse 5s;
}

@keyframes pulse {
	0% {
	color: #051E3E;
	}
	10% {
		color: #051E3E;
	}
	30% {
		color: white;
	}
	50% {
		color: #051E3E;
	}
	60% {
		color: #051E3E;
	}
	80% {
		color: white;
	}
	100% {
		color: #051E3E;
	}
}

#hi:after {
	content: "";
	animation: spin 5s linear;
}

@keyframes spin {
  0% { content:"Hi"; }
  100% { content:"How do you like it?"; }
}