SCSS
body {
animation: theme 21s linear infinite;
&:after,
&:before {
content: '';
display: block;
position: fixed;
z-index: -1;
top: 0;
width: 100vw;
height: 100vh;
width: 100vmax;
height: 100vmax;
background: rgba(0,0,0,0.05);
animation: background 90s linear infinite;
}
&:after {
left: 15vw;
}
&:before {
right: 15vw;
animation-delay: -30s;
animation-direction: reverse;
}
}
@keyframes theme {
0% { background: #74C390; }
16% { background: #5DBDB6; }
33% { background: #59D4E1; }
50% { background: #51BCE8; }
66% { background: #FA5374; }
83% { background: #E46653; }
100% { background: #74C390; }
}
@keyframes background {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
