Disco Lights

Sometimes the realtime example cannot available for blogspot so I add Image,

Real time example

Inspect the Html code

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Disco Lights</title>
<style>        
body {
margin: 0;
background-color: #1D1F20;
}
.disco {
position: absolute;
width: 100%;
height: 100%;
}
.disco .grid-big {
display: flex;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
width: 100%;
height: 100%;
}
.cell-1 {
width: 20%;
height: 20%;
border-radius: 5px;
margin: 2px;
animation: quick-glow 1.25s 0.3s infinite linear;
-webkit-animation: quick-glow 1.25s 0.3s infinite linear;}
.cell-1:nth-child(1),.cell-1:nth-child(7),.cell-1:nth-child(12) ,.cell-1:nth-child(18){
animation: quick-glow 1s 0.15s infinite linear;
-webkit-animation: quick-glow .4s 0.15s infinite linear;}
.cell-1:nth-child(2),.cell-1:nth-child(8),.cell-1:nth-child(13),.cell-1:nth-child(19) {
animation: quick-glow 1.1s 0.15s infinite linear;
-webkit-animation: quick-glow .6s 0.15s infinite linear;
}.cell-1:nth-child(3),.cell-1:nth-child(9),.cell-1:nth-child(14),.cell-1:nth-child(20) {
animation: quick-glow 1.2s 0.15s infinite linear;
-webkit-animation: quick-glow .8s 0.15s infinite linear;
}.cell-1:nth-child(4),.cell-1:nth-child(9),.cell-1:nth-child(15) ,.cell-1:nth-child(21){
animation: quick-glow .4s 0.15s infinite linear;
-webkit-animation: quick-glow 1s 0.15s infinite linear;}
.cell-1:nth-child(5),.cell-1:nth-child(10) ,.cell-1:nth-child(16),.cell-1:nth-child(22){
animation: quick-glow .6s 0.15s infinite linear;
-webkit-animation: quick-glow 1.2s 0.15s infinite linear;}
.cell-1:nth-child(6),.cell-1:nth-child(11) ,.cell-1:nth-child(17),.cell-1:nth-child(23){
animation: quick-glow .8s 0.15s infinite linear;
-webkit-animation: quick-glow 1.3s 0.15s infinite linear;}
@keyframes quick-glow {
5%{
background:rgb(255, 47, 47)(255, 47, 47);
box-shadow: 0 0 10px 2px rgb(255, 47, 47)(255, 47, 47);
}
20% {
z-index: 99;
background: rgb(250, 137, 32);
box-shadow: 0 0 10px 2px rgb(250, 137, 32);
}
33%{
background: rgb(250, 185, 32);
box-shadow: 0 0 10px 2px rgb(250, 185, 32);
}
45%{
background: rgb(210, 250, 32);
box-shadow: 0 0 10px 2px rgb(210, 250, 32);
}
57%{
background: rgb(101, 250, 32);
box-shadow: 0 0 10px 2px rgb(101, 250, 32);
}
70%{
background: rgb(32, 250, 239);
box-shadow: 0 0 10px 2px rgb(32, 235, 250);
}
87%{
background: rgb(32, 36, 250);
box-shadow: 0 0 10px 2px rgb(36, 32, 250);
}
90%{
background: rgb(217, 32, 250);
box-shadow: 0 0 10px 2px rgb(217, 32, 250);
}
100%{
background: white;
box-shadow: 0 0 10px 2px white;
}
}
@-webkit-keyframes quick-glow {
5%{
background:rgb(255, 47, 47)(255, 47, 47);
box-shadow: 0 0 10px 2px rgb(255, 47, 47)(255, 47, 47);
}
20% {
z-index: 99;
background: rgb(250, 137, 32);
box-shadow: 0 0 10px 2px rgb(250, 137, 32);
}
33%{
background: rgb(250, 185, 32);
box-shadow: 0 0 10px 2px rgb(250, 185, 32);
}

45%{
background: rgb(210, 250, 32);
box-shadow: 0 0 10px 2px rgb(210, 250, 32);
}
57%{
background: rgb(101, 250, 32);
box-shadow: 0 0 10px 2px rgb(101, 250, 32);
}
70%{
background: rgb(32, 250, 239);
box-shadow: 0 0 10px 2px rgb(32, 235, 250);
}
87%{
background: rgb(32, 36, 250);
box-shadow: 0 0 10px 2px rgb(36, 32, 250);
}
98%{
background: rgb(217, 32, 250);
box-shadow: 0 0 10px 2px rgb(217, 32, 250);
}
100%{
background: white;
box-shadow: 0 0 10px 2px white;
}}
</style>
<body>
<div class="disco">
<div class="grid-big">
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
<div class="cell-1" style="background:red;"> </div>
</div>
</div>
</body>
</html>