JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background: #343434; height: 100vh; width:100%">
  <span class="blinking-up">I Am DaiDH?</span>
  <span class="blinking-down">I Am DaiDH?</span>
</div>

CSS

@keyframes blink-up {
	from {
		background: #215448;
	}
	to {
		background: none;
	}
}

@keyframes blink-down {
	from {
		background: #613e45;
	}
	to {
		background: none;
	}
}

.blinking-up {
  animation: blink-up 0.6s infinite;
	color: inherit;
	text-decoration: blink;
/* 	animation-name: blink-up;
	-webkit-animation-name: blink-up;
	animation-duration: 0.6s;
	-webkit-animation-duration: 0.6s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate; */
}

.blinking-down {
  animation: blink-down 0.7s infinite;
	color: inherit;
	text-decoration: blink;
	/* animation-name: blink-down;
	-webkit-animation-name: blink-down;
	animation-duration: 0.6s;
	-webkit-animation-duration: 0.6s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	animation-direction: alternate;
	-webkit-animation-direction: alternate; */
}