<div id="container">
	<p>D</p>
	<p>O</p>
	<p>S</p>
	<p>K</p>
	<p>I</p>
</div>
body{background-color: hsla(58, 100%, 50%);margin:0;}
#container{
	width: 500px;
	height: 200px;
	border:5px double white;
	transform: translate(10%,10%);
	position: absolute;
	left:10px;
}
 p{
	color: white;
	font-size: 120px;
	text-align: center;
	float: left;
	font-weight: bold;
	position: relative;
	top: -90px;
	left: 10px;
	letter-spacing: 15px;
	animation:change 5s  infinite;
	opacity: 0;
	

}
@keyframes change
{
0%{opacity: 0; transform: scale(0);}
50%{opacity: 1; 
	transform: scale(1.2);
	text-shadow: 2px 0px 0  red,-2px 0px 0  black,
	0 1px 0  black , 0 -1px 0  red;}
100%{opacity: 0;transform: scale(0);}
}

p:nth-child(1){
	animation-delay: 0s;
}
p:nth-child(2){
	animation-delay: .4s;
}
p:nth-child(3){
	animation-delay: .8s;
}
p:nth-child(4){
	animation-delay: 1.2s;
}
p:nth-child(5){
	animation-delay: 1.6s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.