Glowing Text Animation Using HTML and CSS

HTML Code

<div class="glow">
	<span>H</span>
	<span>A</span>
	<span>P</span>
	<span>P</span>
	<span>Y</span>
	<br>
	<span>H</span>
	<span>O</span>
	<span>L</span>
	<span>I</span>
</div>

CSS Code

.glow span {
	font-size: 40px;
	display: inline-block;
	width: 45px;
	height: 45px;
	text-align: center;
	border: 25px solid rgba(255,255,255,0.4);
	margin: 0 -2.5px;
	animation: animate 1s linear infinite;
}
@keyframes animate {
	0% {
		color: #f00;
		box-shadow: 0 2px 10px rgba(255,0,0,1);
		border: 2px solid rgba(255,0,0,1);
	}
	50% {
		color: #0f0;
		box-shadow: 0 2px 10px rgba(0,255,0,1);
		border: 2px solid rgba(0,255,0,1);
	}
	100% {
		color: #f00;
		box-shadow: 0 2px 10px rgba(255,0,0,1);
		border: 2px solid rgba(255,0,0,1);
	}
}