CSS
body{background-color: hsla(58, 100%, 50%, 1);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;
}
