html {
margin: 0;
height: 100vh;
background: rgb(229,233,255);
background: radial-gradient(circle, rgba(229,233,255,1) 0%, rgba(255,218,225,1) 100%);
}
html,flex {
display: flex;
justify-content: center;
align-items: center;
}
grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
height: 80vh;
width: 80vh;
}
div {
background-color: #8196fb;
opacity: 0.9;
animation:
rotation 5s infinite ease,
color 5s infinite ease;
}
@keyframes rotation {
0%% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(90deg) scale(1);
}
}
@keyframes color{
0%, 100%{
opacity: .9;
background-color: #8196fb;
}
50%{
opacity: 0.1;
background-color: #7a21dc;
}
}
.d1 {
}
.d2 {
animation-delay: 0.5s;
}
.d3 {
animation-delay: 1s;
}
.d4 {
animation-delay: 1.5s;
}
.d5 {
animation-delay: 2s;
}
.d6 {
animation-delay: 2.5s;
}
.d7 {
animation-delay: 3s;
}
.d8 {
animation-delay: 3s;
}
.d9 {
animation-delay: 3.5s;
}
.d10 {
animation-delay: 4s;
}
.d11 {
animation-delay: 4.5s;
}
.d12 {
animation-delay: 5s;
}
.d13 {
animation-delay: 5.5s;
}
.d14 {
animation-delay: 6s;
}
.d15 {
animation-delay: 6.5s;
}
.d16 {
animation-delay: 7s;
}
.d17 {
animation-delay: 7.5s;
}
.d18 {
animation-delay: 8s;
}
.d19 {
animation-delay: 8.5s;
}