CSS
body {
background: #e74c3c;
min-width: 800px;
min-height: 600px;
overflow: hidden;
}
div {
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
text-align: center;
}
span {
display: inline-block;
width: 20px;
height: 20px;
margin: 145px 3px 0;
background: rgba(255,255,255,0.25);
border-radius: 50%;
transform: translateY(0);
animation: wave 2s infinite ease-in-out;
}
span:nth-child(1) { animation-delay: 0s; }
span:nth-child(2) { animation-delay: 0.1s; }
span:nth-child(3) { animation-delay: 0.2s; }
span:nth-child(4) { animation-delay: 0.3s; }
span:nth-child(5) { animation-delay: 0.4s; }
/* Animation */
@keyframes wave {
0%,60%,100% {
background: rgba(255,255,255,0.25);
transform: translateY(0);
}
20% {
background: rgba(255,255,255,0.75);
transform: translateY(20px);
}
40% {
background: rgba(255,255,255,0.75);
transform: translateY(-20px);
}
}
2 Responses